如何在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所有tspans？也许像元素line-height上的财产text？

它看起来不像text标签具有设置delta y的属性.在评论中建议使用JQuery来设置x所有tspans 的属性.看起来该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:
到目前为止,感谢您的答案.看起来有一种方法可以显示相对间隔开的多行文本.请参阅下面的答案.

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

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>'