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? Zeichnen komplizierter Formen in D3
0
A
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
- 1. D3 zeichnen verschiedene SVG-Formen in einem Aufruf, keine Sichtbarkeit
- 2. D3 - Zeichnung mehrere Formen
- 3. Zeichnen Formen in css ansprechend
- 4. Freiform Zeichnen Leinwand (mit Formen) in Java
- 5. Zeichnen von Formen nach Pixel in libgdx
- 6. komplizierter Typedef in C++
- 7. Text in d3 Bogen zeichnen Javascript
- 8. Zeichnen Kreise in Kreis - d3 Diagramm
- 9. WPF Inkcanvas Zeichnen und Drehen von Formen
- 10. Zeichnen von Formen als Werte auf ZingChart
- 11. Leinwand frei zeichnen und Formen hinzufügen
- 12. Zeichnen von Formen mit JavaScript und Canvas
- 13. Mehrere Formen beim Zeichnen per Mausklick
- 14. Leaflet Draw verliert Formen nach dem Zeichnen
- 15. Vergleichen komplizierter Listen
- 16. Schienen Optimierung komplizierter Abfrage
- 17. Zeichnen nicht durchgängiger Linien mit d3
- 18. Zeichnen von Formen in Scene2d Actor (IE. Image oder ImageTextButton)
- 19. Matplotlib in Python - Zeichnen von Formen und animieren sie
- 20. Zeichnen von mehreren Formen mit ShapeDrawable in Xml mit Android
- 21. Zeichnen von Formen in Android MapView unabhängig von der Zoomstufe
- 22. D3 - Zeichnen eines Pfades zwischen DOM-Elementen
- 23. Histogramme neu zeichnen mit Crossfilter und D3
- 24. D3.js zeichnen jeden Punkt auf einmal
- 25. Durchführen komplizierter XPath-Abfragen in Scala
- 26. Das richtige Format zum Zeichnen von Polygondaten in D3
- 27. Zeichnen einer d3 Echtzeit-Liniendiagramm in socket.on (Socket IO)
- 28. Zeichnen von flachen Formen auf HTML-Canvas schafft verschwommene Grenzen
- 29. Wie kann ich viele animierte Formen auf swt Canvas zeichnen?
- 30. Wie alle Formen nach dem Zeichnen zu löschen
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. –
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. –