svg - 空 tspan 未呈现/忽略 dy 值

Question

我有以下示例 svg:

<svg>
 <text x="0" y="10">
  <tspan x="0" dy="10">Foo</tspan>
  <tspan x="0" dy="10"></tspan> // this is completely ignored
  <tspan x="0" dy="10">Bar</tspan> // this is positioned 10 units below not 20
 </text>
</svg>

为什么 empy tspan 被忽略？甚至不识别 dy 属性，因此下一行显示在第一行的正下方。

我怎样才能实现一个空行(有一个 tspan 因为它都是生成的)？
我知道一个简单的空间可以解决它，但我需要一个真正的空行。也许我可以使用一些css hacks？

Answer 1

我所做的是使用包含任何值(我使用点)和 dy 属性的 tspan，然后将其隐藏起来。

<svg>
    <text x="0" y="10">
        <tspan x="0" dy="10">Foo</tspan>
        <tspan x="0" dy="10" visibility="hidden">.</tspan> // this won't be visible but will keep the space
        <tspan x="0" dy="10">Bar</tspan>
    </text>
</svg>

Visibility="hidden"适用于 Chrome、IE 和 Safari(尚未测试其他浏览器)，而 IE 不喜欢 opacity="0"并且会忽略间距。

希望能帮助到你