1
是否可以使用javascript在HTML5中沿椭圆绘制名称?我们的目标是能够像附加图像一样沿椭圆上的任意偏移添加名称。可能用JS/CSS绘制椭圆形文字?
是否可以使用javascript在HTML5中沿椭圆绘制名称?我们的目标是能够像附加图像一样沿椭圆上的任意偏移添加名称。可能用JS/CSS绘制椭圆形文字?
你可以简单地使用svg
的textPath
元素来实现这一目标。
<svg width="300" height="150" viewBox="0 -15 200 130">
<path d="M0,50 c0,-65 200,-65 200,0 c0,65 -200,65 -200,0" fill="#645432" />
<path id="shape2" d="M0,50 c0,65 200,65 200,0 c0,-65 -200,-65 -200,0" fill="none" />
<path id="shape" d="M12,50 c0,-52 180,-52 176,0 c0,52 -180,52 -176,0" fill="#987C54" stroke="#8BAC96" />
<text><textPath startOffset="30" xlink:href="#shape">Jonathon</textPath></text>
<text><textPath startOffset="150" xlink:href="#shape">Sierra</textPath></text>
<text><textPath startOffset="40" xlink:href="#shape2">Naomie</textPath></text>
<text><textPath startOffset="170" xlink:href="#shape2">Daniel</textPath></text>
</svg>
哇....非常酷,谢谢 – patrickkidd 2015-01-27 03:15:16
你是如何创建此路径?你是用插画师来追踪它的吗?我不熟悉创作SVG路径。 – patrickkidd 2015-01-27 21:14:13
@patrickkidd - 这是一个没有任何矢量图形工具的手写代码。如果你想改变'path',你首先必须理解['textPath'](http://www.w3.org/TR/SVG/text.html#TextPathElement)元素以及它的工作原理。然后,您可以继续使用矢量图形工具创建一个形状。 – 2015-01-27 21:16:16