如何在 svg <tspan> 元素中插入换行符?

aff*_*ffu 6 html javascript svg

我每个<tspan>标签都有两行文本。

<tspan dy="-11.7890625">welocme</tspan> <tspan dy="16.8" x="285.75">text</tspan>
Run Code Online (Sandbox Code Playgroud)

他们之间需要换行。但<br>不工作。有人可以帮我从这里出去吗?

小智 5

我认为这是不可能的。

但是,您可以在 text 元素中使用多个 tspan 元素,并为 dy 属性使用 em 单位。请记住,有两种可能的定位属性:

  • (x & y) - 设置绝对位置
  • (dx & dy) - 设置相对位置

<svg width="200" height="200">
  <text x="0" y="0">
    <tspan x="0" dy="1em">Hello</tspan>
    <tspan x="0" dy="1em">World</tspan>
  </text>
</svg>
Run Code Online (Sandbox Code Playgroud)