是否可以将列表放在 <svg> 标签中以便将其放置在曲线上？

问题描述

这是对this question from earlier today的跟进。

从我接受的答案中，我了解到只有 SVG elements 被放置在 SVG 视图框内。但是，在链接页面上，我没有看到类似列表的内容。

所以我的问题是：是否可以在 <ul> 内放置一个 <textPath>，以便我可以沿着曲线放置项目？

解决方法

SVG 没有像 HTML 那样的文本布局功能。所以答案是否。

很遗憾，您没有告诉我们您所说的“列表”是什么意思。你的意思是你想让多行文本显示在另一行之下？

如果你想有平行的文本行，那么你必须自己手动布局。

方法一

在下面的示例中，我们使用 <tspan> 元素来定位文本的各个行。 <tspan> 元素与 HTML <span> 元素具有相似的用途，但也允许进行一些定位。

这里我们使用 x="0" 将文本位置重置回行首。 dy="1em" 将该行从最后一行文本向下移动 1em。

path {
  fill: none;
  stroke: lightblue;
}

<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>
      <textPath xlink:href="#curve">
        Dangerous Curves Ahead
        <tspan x="0" dy="1em">Slippery When Wet</tspan>
        <tspan x="0" dy="1em">Danger Falling Rocks</tspan>
        <tspan x="0" dy="1em">Single Lane Bridge</tspan>
      </textPath>
    </text>
</svg>

您不会发现每一行的文本越来越抽筋，因为该行的凹曲线迫使较低行的字符位置靠得更近。如果曲线是凸面的，字符之间的距离会更远。

方法二

如果您不想要这种效果，那么您需要将每一行文本放在自己的路径上。

path {
  fill: none;
  stroke: lightblue;
}

<svg viewBox="0 0 500 500">

    <path id="curve" d="M73.2,97" />
    <text>
      <textPath xlink:href="#curve">
        Dangerous Curves Ahead
      </textPath>
    </text>
    <text transform="translate(0,16)">
      <textPath xlink:href="#curve">
        Slippery When Wet
      </textPath>
    </text>
    <text transform="translate(0,32)">
      <textPath xlink:href="#curve">
        Danger Falling Rocks
      </textPath>
    </text>
    <text transform="translate(0,48)">
      <textPath xlink:href="#curve">
        Single Lane Bridge
      </textPath>
    </text>
</svg>

更新

所以你想要的是一个接一个地放置文本？对此的解决方案是如此明显，以至于我认为这不是您的意思。

就这样做：

path {
  fill: none;
  stroke: lightblue;
}

<svg viewBox="0 0 500 500">

  <path id="curve" d="M73.2,97" />
  <text>
    <textPath xlink:href="#curve">
      Dangerous Curves Ahead
      Slippery When Wet
      Danger Falling Rocks
      Single Lane Bridge
    </textPath>
  </text>
</svg>

curve html svg svg svg tags