如何在 javascript 中对 svg 文本进行换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16701522/
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 linebreak an svg text within javascript?
提问by sollniss
So here is what I have:
所以这就是我所拥有的：
<path class="..." onmousemove="show_tooltip(event,'very long text
\\n I would like to linebreak')" onmouseout="hide_tooltip()" d="..."/>
<rect class="tooltip_bg" id="tooltip_bg" ... />
<text class="tooltip" id="tooltip" ...>Tooltip</text>
<script>
<![CDATA[
function show_tooltip(e,text) {
var tt = document.getElementById('tooltip');
var bg = document.getElementById('tooltip_bg');
// set position ...
tt.textContent=text;
bg.setAttribute('width',tt.getBBox().width+10);
bg.setAttribute('height',tt.getBBox().height+6);
// set visibility ...
}
...
Now my very long tooltip text doesn't have a linebreak, even though if I use alert(); it shows me that the text actually DOES have two lines. (It contains a "\" though, how do I remove that one by the way?)
I can't get CDATA to work anywhere.
现在我很长的工具提示文本没有换行符，即使我使用了 alert(); 它告诉我文本实际上有两行。（虽然它包含一个“\”，但我该如何删除它？）
我无法让 CDATA 在任何地方工作。
回答by Sergiu Dumitriu
This is not something that SVG 1.1 supports. SVG 1.2 does have the textAreaelement, with automatic word wrapping, but it's not implemented in all browsers. SVG 2 does not plan on implementing textArea, but it does have auto-wrapped text.
这不是 SVG 1.1 支持的东西。SVG 1.2 确实具有textArea自动换行的元素，但并非在所有浏览器中都实现了。SVG 2不打算实现textArea，但它确实有自动换行文本。
However, given that you already know where your linebreaks should occur, you can break your text into multiple <tspan>s, each with x="0"and dy="1.4em"to simulate actual lines of text. For example:
但是，鉴于您已经知道应该在哪里换行，您可以将文本分成多个<tspan>s，每个都带有x="0"和dy="1.4em"以模拟实际的文本行。例如：
<g transform="translate(123 456)"><!-- replace with your target upper left corner coordinates -->
<text x="0" y="0">
<tspan x="0" dy="1.2em">very long text</tspan>
<tspan x="0" dy="1.2em">I would like to linebreak</tspan>
</text>
</g>
Of course, since you want to do that from JavaScript, you'll have to manually create and insert each element into the DOM.
当然，由于您想从 JavaScript 执行此操作，因此您必须手动创建每个元素并将其插入到 DOM 中。
回答by Kristīne Glode
I suppese you alredy managed to solve it, but if someone is looking for similar solution then this worked for me:
我想你已经设法解决了它，但是如果有人正在寻找类似的解决方案，那么这对我有用：
g.append('svg:text')
.attr('x', 0)
.attr('y', 30)
.attr('class', 'id')
.append('svg:tspan')
.attr('x', 0)
.attr('dy', 5)
.text(function(d) { return d.name; })
.append('svg:tspan')
.attr('x', 0)
.attr('dy', 20)
.text(function(d) { return d.sname; })
.append('svg:tspan')
.attr('x', 0)
.attr('dy', 20)
.text(function(d) { return d.idcode; })
There are 3 lines separated with linebreak.
有 3 行用换行符分隔。
回答by steco
With the tspan solution, let's say you don't know in advance where to put your line breaks: you can use this nice function, that I found here: http://bl.ocks.org/mbostock/7555321
使用 tspan 解决方案，假设您事先不知道在哪里放置换行符：您可以使用我在此处找到的这个不错的功能：http: //bl.ocks.org/mbostock/7555321
That automatically does line breaks for long text svg for a given width in pixel.
对于给定的像素宽度，这会自动为长文本 svg 进行换行。
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
回答by Peter Collingridge
I think this does what you want:
我认为这可以满足您的要求：
function ShowTooltip(evt, mouseovertext){
// Make tooltip text
var tooltip_text = tt.childNodes.item(1);
var words = mouseovertext.split("\\n");
var max_length = 0;
for (var i=0; i<3; i++){
tooltip_text.childNodes.item(i).firstChild.data = i<words.length ? words[i] : " ";
length = tooltip_text.childNodes.item(i).getComputedTextLength();
if (length > max_length) {max_length = length;}
}
var x = evt.clientX + 14 + max_length/2;
var y = evt.clientY + 29;
tt.setAttributeNS(null,"transform", "translate(" + x + " " + y + ")")
// Make tooltip background
bg.setAttributeNS(null,"width", max_length+15);
bg.setAttributeNS(null,"height", words.length*15+6);
bg.setAttributeNS(null,"x",evt.clientX+8);
bg.setAttributeNS(null,"y",evt.clientY+14);
// Show everything
tt.setAttributeNS(null,"visibility","visible");
bg.setAttributeNS(null,"visibility","visible");
}
It splits the text on \\\nand for each puts each fragment in a tspan. Then it calculates the size of the box required based on the longest length of text and the number of lines. You will also need to change the tooltip text element to contain three tspans:
它拆分文本\\\n并为每个将每个片段放在一个 tspan 中。然后它根据文本的最长长度和行数计算所需框的大小。您还需要更改工具提示文本元素以包含三个 tspan：
<g id="tooltip" visibility="hidden">
<text><tspan>x</tspan><tspan x="0" dy="15">x</tspan><tspan x="0" dy="15">x</tspan></text>
</g>
This assumes that you never have more than three lines. If you want more than three lines you can add more tspans and increase the length of the for loop.
这假设您永远不会超过三行。如果您想要多于三行，您可以添加更多 tspan 并增加 for 循环的长度。
回答by loretoparisi
I have adapted a bit the solution by @steco, switching the dependency from d3to jqueryand adding the heightof the text element as parameter
我对@steco 的解决方案进行了一些调整，将依赖项从d3to切换到jquery并添加height文本元素的作为参数
function wrap(text, width, height) {
text.each(function(idx,elem) {
var text = $(elem);
text.attr("dy",height);
var words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat( text.attr("dy") ),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (elem.getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
回答by Mila Nautikus
use HTML instead of javascript
使用 HTML 而不是 javascript
<html>
<head><style> * { margin: 0; padding: 0; } </style></head>
<body>
<h1>svg foreignObject to embed html</h1>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300"
x="0" y="0" height="300" width="300"
>
<circle
r="142" cx="150" cy="150"
fill="none" stroke="#000000" stroke-width="2"
/>
<foreignObject
x="50" y="50" width="200" height="200"
>
<div
xmlns="http://www.w3.org/1999/xhtml"
style="
width: 196px; height: 196px;
border: solid 2px #000000;
font-size: 32px;
overflow: auto; /* scroll */
"
>
<p>this is html in svg 1</p>
<p>this is html in svg 2</p>
<p>this is html in svg 3</p>
<p>this is html in svg 4</p>
</div>
</foreignObject>
</svg>
</body></html>