我可以在 textPath 标签中放置什么以使其遵循曲线？答案

【问题标题】：What am I allowed to put in a textPath tag so that it follows the curve?我可以在 textPath 标签中放置什么以使其遵循曲线？
【发布时间】：2021-05-29 07:04:15
【问题描述】：

我复制了下面倒数第二个 HTML sn-p 表单 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 技巧来做到这一点。

【问题讨论】：

标签： html css tags curve

【解决方案1】：

p 不是SVG element，因此它位于 SVG 视图框之外。或者，您可以使用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>

【讨论】：