2016-06-06 11 views
0

Ich versuche, eine unregelmäßige, Blütenblattform für eine D3-Animation zu zeichnen, aber ich kann keine verständliche Dokumentation für ungerade Formen im SVG-Format finden. Wie könnte ich eine solche Form schaffen? Rose-petal shapeZeichnen komplizierter Formen in D3

+2

Diese Frage wird in Kürze geschlossen werden, aber vorher, diese Was ich tun würde: Mit Inkscape oder Illustrator würde ich die Form zeichnen. Dann würde ich das SVG kopieren und es in eine 'var' einfügen und diese Variable für das Attribut" d "des Pfades verwenden. –

+2

Ich würde etwas wie [this] (http://stackoverflow.com/questions/14790702/d3-js-plot-elements-using-polar-coordinates) verwenden, um eine polare Kurve zu zeichnen und [diese] (http://jwilson.coe.uga.edu/EMAT6680Fa2013/Thurston/Write-Ups/Write-up%2011/Polar_Petals.html), um die Blütenblattform zu erhalten. –

Antwort

1

Es ist so etwas wie dieses:

<svg> 
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M21,34.328C21,15.693,32.477,0.515,50.124,0.515 
    C67.77,0.515,79,16.928,79,34.328c0,17.399-29,65.157-29,65.157S21,52.962,21,34.328z"/> 
</svg> 

und Verwendung als Definition (defs) für die Zukunft. Schauen here

und hier: Is it possible to import svg shapes in d3.js?

Wenn Sie es wollen, tun mit der Hand, ist hier die Pfade Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Hier ist die Codepen

Verwandte Themen