我可以在 textPath 标签中放入什么以便它遵循曲线? [英] What am I allowed to put in a textPath tag so that it follows the curve?
问题描述
我已经复制了倒数第二个 HTML 片段表单 这里 并通过在文本中添加 <p>uffa</p>
进行编辑.如您所见,uffa
显示在页面底部而不是曲线上.这是为什么?我可以在 textPath
标签中放什么,以便它遵循曲线?
I've copied the second to last HTML snippet form here below and edited it by adding <p>uffa</p>
in the text. As you can see, uffa
is show at the bottom of the page instead of on the curve. Why is that? What am I allowed to put in the textPath
tag so that it follows the curve?
<svg viewBox="0 0 500 500">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath xlink:href="#curve">
Dangerous Curves Ahead <p>uffa</p>
</textPath>
</text>
</svg>
添加 CSS 标签,以防有 CSS 技巧可以做到这一点.
Adding CSS tag in case there's a CSS trick to do that.
推荐答案
p
不是 SVG 元素,因此它被放置在 SVG 视图框之外.或者,您可以使用 tspan
用于定义
p
is not an SVG element and therefore it is placed outside the SVG viewbox. Alternatively you can make use of tspan
which is used to define a subtext within <text>
<svg viewBox="0 0 500 500">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath xlink:href="#curve">
Dangerous Curves Ahead <tspan>uffa</tspan>
</textPath>
</text>
</svg>
这篇关于我可以在 textPath 标签中放入什么以便它遵循曲线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!