未显示空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技巧？

Answer 1

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

如果the specification says太多，将被忽略。

如果提供的多于字符，那么任何额外的都不会影响字形的位置。

您是否可以不更改生成器，以便每次有空白链接时，它都会记住空白并将多余的dy添加到下一个实际文本中？

或者编写一个遍历tspan元素并修复它们的javascript函数。

Answer 2

tspan标签用于对文本字符进行分组（用于添加特定样式，例如position，color等），其尺寸是根据其内容计算的；

没有内容，它将被忽略。

---

作为解决方法，您可以尝试添加换行符<br>：

    <svg>
     <text x="0" y="10">
      <tspan x="0" dy="10">Foo</tspan>
      <tspan x="0" dy="10"><br></tspan>
      <tspan x="0" dy="10">Bar</tspan>
     </text>
    </svg>

---

编辑：

由于<br>不是有效的SVG元素，您可以尝试使用多个dy值（向Robert指出，以指出这些是文档之外的值：]

   <svg>
    <text x="0" y="10">
     <tspan x="0" dy="10">Foo</tspan>
     <tspan x="-2" dy="20,10">&nbsp;Bar</tspan>
    </text>
   </svg>
或

   <svg>
    <text x="0" y="10">
     <tspan x="0" dy="10">Foo</tspan>
     <tspan x="0" dy="20">Bar</tspan>
    </text>
   </svg>
我不知道您是如何生成tspan的，但是您可以很容易地在脚本中实现它。

Answer 3

我要做的是使用包含dy属性的任何值（我使用点）的tspan，然后将其隐藏在视图中。