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

Question

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

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

所以我的问题是：是否可以在<textPath> 中放置一个<ul>，这样我就可以沿曲线放置物品？

Answer 1

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,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
      </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,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
      Slippery When Wet
      Danger Falling Rocks
      Single Lane Bridge
    </textPath>
  </text>
</svg>