空 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 hack？

Answer 1

dy 实际上可以包含多个值，例如<tspan dy="1,2,3">abc</tspan>每个 dy 适用于内容中的每个字符，因此 1 适用于 a，2 适用于 b 等。

如果太多，规范会说它们会被忽略。

如果提供的 <length> 多于字符，则任何额外的 <length> 将不会对字形定位产生影响。

你能不能改变生成器，以便每次出现空白链接时它都会记住空白并将额外的 dy 添加到下一个真实文本中？

或者编写一个 javascript 函数来迭代 tspan 元素并修复它们。