在D3中绘制复杂的图形

我想为D3动画绘制一个不规则的花瓣形状，但是我找不到SVG格式中奇怪形状的任何可理解的文档。我该如何去创造这样的形状？在D3中绘制复杂的图形

2016-06-06 JD Angerhofer

这个问题将很快被关闭，但在此之前，这是我会做的：使用Inkscape或illustrator，我会画出形状。然后，我复制SVG并将其粘贴到'var'中，并将该var用作路径的“d”属性。 –

我会使用[this]（http://stackoverflow.com/questions/14790702/d3-js-plot-elements-using-polar-coordinates）来绘制极坐标曲线，并使用[this]（http：/ /jwilson.coe.uga.edu/EMAT6680Fa2013/Thurston/Write-Ups/Write-up%2011/Polar_Petals.html）以获得花瓣形状。 –

这件事情是这样的：

<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>

而且作为定义以供将来参考使用（DEFS）。看here

这里：Is it possible to import svg shapes in d3.js?

如果你想手工做，这里的路径教程：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

这里Codepen

来源

2016-06-06 22:49:37 Klaujesi

在D3中绘制复杂的图形

回答

相关问题