我可以在 textPath 标签中放置什么以使其跟随曲线?
What am I allowed to put in a textPath tag so that it follows the curve?
我复制了下面倒数第二个 HTML 代码段形式 here 并通过在文本中添加 <p>uffa</p>
对其进行了编辑。如您所见,uffa
显示在页面底部而不是曲线上。这是为什么?我可以在 textPath
标签中放置什么以使其跟随曲线?
<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 技巧。
p
is not an SVG element and therefore it is placed outside the SVG viewbox. Alternatively you can make use of tspan
用于在 <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>
我复制了下面倒数第二个 HTML 代码段形式 here 并通过在文本中添加 <p>uffa</p>
对其进行了编辑。如您所见,uffa
显示在页面底部而不是曲线上。这是为什么?我可以在 textPath
标签中放置什么以使其跟随曲线?
<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 技巧。
p
is not an SVG element and therefore it is placed outside the SVG viewbox. Alternatively you can make use of tspan
用于在 <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>