Html 如何在SVG中显示多行文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31469134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display multiple lines of text in SVG?
提问by 1.21 gigawatts
Is it possible to display multiple lines of text in SVG without using the dyproperty? I'm using SVG 1.1 but might be able to use 1.2.
是否可以在不使用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>I've typed the code above. I want the text all flush to the left and each tspanto be a new line. Is tspanthe only tag I can use? I want SVG to position the text lines vertically with line breaks. I do not want to manually enter the dy.
我已经输入了上面的代码。我希望文本全部向左对齐，每个文本都是tspan一个新行。是tspan我唯一可以使用的标签吗？我希望 SVG 使用换行符垂直定位文本行。我不想手动输入dy.
According to what I've read, each line should appear below the other. They are but they are also staggered across.
根据我所读到的，每一行都应该出现在另一行之下。他们是，但他们也交错。
<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>I guess it is required to add the xproperty. If you are setting the dyproperty to a fixed value, what happens when you change the font size?
我想需要添加x属性。如果将dy属性设置为固定值，更改字体大小时会发生什么？
This is working better than what I started with:
这比我开始时更好：
<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>Is there a way to apply the xand dyto all the tspans? Maybe a property like line-heighton the textelement?
有没有办法将x和dy应用于所有tspans ？也许是元素line-height上的属性text？
It doesn't look like the text tag has a property to set the delta y. It has been suggested in the comments to use JQuery to set the xattribute of all tspans. It looks like the dyproperty can accept other types of values such as points and percentages!? Is there a way to set the dyto a value that is 120% of the font size of its parent text element? I've tried to set it to 120%, but it doesn't seem to work like I expect. When I set 120% in the dyproperty, it goes off the screen. When I set it to 12or 12pxit stays in the same position. If I set it to 12%, it shifts slightly but is not 120% or 12px.
看起来文本标签没有设置增量 y 的属性。评论中已经建议使用JQuery来设置x所有tspans的属性。看起来该dy属性可以接受其他类型的值，例如点和百分比！？有没有办法将 设置为dy其父文本元素字体大小的 120% 的值？我试图将它设置为 120%，但它似乎不像我预期的那样工作。当我在dy属性中设置 120% 时，它会从屏幕上消失。当我将它设置为12或12px它保持在相同位置时。如果我将它设置为12%，它会稍微移动但不是 120% 或 12px。
http://codepen.io/anon/pen/PqBRmd
http://codepen.io/anon/pen/PqBRmd
It looks like it can accept any of the following:
http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength
看起来它可以接受以下任何一项：http:
//www.w3.org/TR/SVG/types.html#InterfaceSVGLength
I've also looked up acceptable value types for dyand dx, and I can't make sense of it http://www.w3.org/TR/SVG/text.html#TSpanElementDXAttribute.
我还为dyand查找了可接受的值类型dx，但我无法理解它http://www.w3.org/TR/SVG/text.html#TSpanElementDXAttribute。
UPDATE 4:
Thanks for the answers so far. It looks like there is a way to display multiple lines of text spaced apart relatively. See my answer below.
更新 4：
感谢您到目前为止的答案。看起来有一种方法可以显示相对间隔开的多行文本。看我下面的回答。
回答by 1.21 gigawatts
It looks like this will space the lines one after another without hard-coding a font size in each tspan. Font at 15px:
看起来这会将行一个接一个地隔开，而无需在每个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>If you change the font size the lines continue to be spaced at 120%apart from each other or 1.2em. Font at 20px:
如果您更改字体大小，线条将继续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>Example - http://codepen.io/anon/pen/oXMVqo
回答by Reptar
tspan is the right way to do it. And this is how:
tspan 是正确的方法。这是如何：
<tspan x="10" dy="15">tspan line 1</tspan>
reference: http://tutorials.jenkov.com/svg/tspan-element.html
回答by Shimon Doodkin
just calculate the heights:
只需计算高度：
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>'
回答by Andrew Swift
In case it is helpful to someone:
如果它对某人有帮助：
If one is generating the SVG from Illustrator, it is possible to draw several parallel lines and use the Text on a Path tool to create a continuous paragraph.
如果从 Illustrator 生成 SVG，则可以绘制多条平行线并使用“路径上的文本”工具创建一个连续的段落。
