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

Question

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

53

是否有可能在SVG中显示多行文本而不使用dy属性？我正在使用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？也许可以在 text 元素上使用类似于 line-height 的属性？看起来文本标签没有设置 delta 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

1

jQuery('tspan').attr('x','0') 将所有的 tspan 设置为 0。 - Alvin K.

3个回答

5

只需计算高度：

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

3

<tspan x="10" dy="15">tspan line 1</tspan>

参考: http://tutorials.jenkov.com/svg/tspan-element.html

tspan元素是SVG中的一个文本容器，用于允许更细粒度地控制文本的布局和样式。它可以嵌套在text元素内部，并允许您将不同的属性应用于不同的文本段落。此外，还可以使用tspan元素创建多行文本，因为每个tspan元素都可以放置在单独的行上。

- Reptar

1

不确定为什么这被评分了。问题的第一句话是：“不使用dy属性”。 - Dan

@Dan，它并不是“要求”在没有dy的情况下完成，而是“询问”是否可以以某种自动的方式完成。问题后面还提到“我不想手动输入dy”。对我来说，“手动”这个关键词意味着任何方便的方式都可以，即使包括dy。也就是说，这个答案并没有提供一个好的示例/解决方案。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 1.21 gigawatts · Accepted Answer

看起来这将使每一行之间保持空隙，而不必在每个 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