如何在 SVG 中显示多行文本？

Question

是否可以在不使用 dy 属性的情况下在 SVG 中显示多行文本？我正在使用 SVG 1.1，但也许可以使用 1.2。

 <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="15" font-size="15">
    <tspan>tspan line 1</tspan>
    <tspan>tspan line 2</tspan>
    <tspan>tspan line 3</tspan>
  </text>
</svg>

我已经输入了上面的代码。我希望文本全部向左对齐，并且每个 tspan 都是一个新行。 tspan 是我唯一可以使用的标签吗？我希望 SVG 使用换行符垂直定位文本行。我不想手动输入 dy 。

根据我读过的内容，每一行都应该出现在另一行之下。它们是，但它们也交错排列。

 <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="0" font-size="15">
    <tspan dy="15">tspan line 1</tspan>
    <tspan dy="15">tspan line 2</tspan>
    <tspan dy="15">tspan line 3</tspan>
  </text>
</svg>

我想需要添加 x 属性。如果将 dy 属性设置为固定值，更改字体大小时会发生什么情况？

这比我开始时的效果更好：

 <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xml:space="preserve">
  <text x="0" y="0" font-size="15" font-family="courier new" dy="0">
    <tspan x="0" dy="15">tspan line 1</tspan>
    <tspan x="0" dy="15">tspan line 2</tspan>
    <tspan x="0" dy="15">tspan line 3</tspan>
  </text>
</svg>

有没有办法将 x 和 dy 应用于所有 tspan s？也许像 line-height 这样的属性在 text 元素上？

看起来文本标签没有设置增量 y 的属性。评论中建议使用 JQuery 设置所有 tspan 的 x 属性。看起来 dy 属性可以接受其他类型的值，例如点数和百分比！？有没有办法将 dy 设置为其父文本元素字体大小的 120% 的值？我试过将它设置为 120%，但它似乎并没有像我预期的那样工作。当我在 dy 属性中设置 120% 时，它会离开屏幕。当我将它设置为 12 或 12px 它保持在相同的位置。如果我将它设置为 12% ，它会轻微移动但不是 120% 或 12px。

http://codepen.io/anon/pen/PqBRmd

看起来它可以接受以下任何一项：

http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength

我还查找了可接受的值类型 dy 和 dx ，我无法理解它 http://www.w3.org/TR/SVG/text .html#TSpanElementDXAttribute。

更新 4：

感谢您到目前为止的回答。看起来有一种方法可以相对间隔地显示多行文本。请参阅下面的答案。

原文由 1.21 gigawatts 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看起来这将一个接一个地分隔行，而无需在每个 tspan 中硬编码字体大小。 15px 的字体：

 <svg style="border:1px solid black" >
    <text x="0" y="0" font-size="15" dy="0">
        <tspan x="0" dy=".6em">tspan line 1</tspan>
        <tspan x="0" dy="1.2em">tspan line 2</tspan>
        <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
</svg>

如果您更改字体大小，则行之间的间距将继续保持在 120% 或 1.2em 。 20px 的字体：

 <svg style="border:1px solid black" >
    <text x="0" y="0" font-size="20" dy="0">
        <tspan x="0" dy=".6em">tspan line 1</tspan>
        <tspan x="0" dy="1.2em">tspan line 2</tspan>
        <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
</svg>

示例 - http://codepen.io/anon/pen/oXMVqo

原文由 1.21 gigawatts 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只需计算高度：

 var drawx=part.x||0;
var drawy=part.y||0;
var fontSize=part.fontSize||14;
var lineHeight=part.lineHeight||1.25;
var style=part.style||"";
var fontFamily=part.fontFamily||"Arial";
var text=part.text.split('\n').map(function(a,i){ return '<tspan x="'+drawx+'" y="'+(drawy+fontSize*lineHeight+i*fontSize*lineHeight)+'">'+a+'</tspan>' }).join('\n');

tqrSvg+='<text x="'+drawx+'" y="'+drawy+'" style="'+style+'" font-family="'+fontFamily+'" font-size="'+fontSize+'">'+text+'</text>'

原文由 Shimon Doodkin 发布，翻译遵循 CC BY-SA 4.0 许可协议