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>

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

如何实现空行（使用tspan，因为它全部生成）？我知道一个简单的空间会修复它，但我需要一个真正的空行。也许我可以使用一些css hacks？

Answer 1

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

如果the specification says太多，则忽略它们。

如果提供的字数大于＆lt; length＆gt;，则任何额外的＆lt; length＆gt; s对字形定位都没有影响。

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

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

Answer 2

我要做的是使用包含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”并会忽略空格。

希望有帮助

Answer 3

tspan标记用于对文字字符进行分组（用于添加position，color等特定样式），其尺寸基于它来计算＆＃39 ; s内容;

没有内容会被忽略。

~~作为解决方法，您可以尝试添加换行符<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值（归功于罗伯特将其指向文档之外）：

<svg> <text x="0" y="10"> <tspan x="0" dy="10">Foo</tspan> <tspan x="-2" dy="20,10"> 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>

我不知道你是如何生成tsp的，但你可以很容易地在脚本中实现这一点。

空tspan未渲染/ dy值被忽略

3 个答案: