如何在 svg 元素中插入多行文本

Question

作为 svg 和 javascript 的入门书，我已经尝试了一段时间以使此代码无济于事。

我的问题是我无法从文本元素 ( class="texts" ) 中获取文本并将其放入另一个 ( MySpeechBoxText1 ) 以保持其多行格式。

这是我的代码：

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="594mm" height="420mm" id="svg58064" viewBox="0 0 2245.0393 1587.4016"> <style>.bar { fill: #a9a9a9; opacity: 0.6; } </style> <g class="miogruppo"> <rect class="bar" x="50" y="60" width="80" height="120"/> <text class="texts" x="0" y="50" font-family="Verdana" font-size="35" fill="blue" display='none'> <tspan x="20" dy="1.2em">test 1</tspan> <tspan x="20" dy="1.2em">test 1</tspan> </text> </g> <g class="miogruppo"> <rect class="bar" x="180" y="80" width="80" height="170"/> <text class="texts" x="0" y="50" font-family="Verdana" font-size="35" fill="blue" display='none'> <tspan x="20" dy="1.2em">test 2</tspan> <tspan x="20" dy="1.2em">test 2</tspan> </text> </g> <g id="group1" display='none'> <title>Tester 2</title> <path id="test1" d="M15,0 H150 V150 H15 L15,90 L0,90 L15,75 Z15 " style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:none;stroke-miterlimit:4;stroke-opacity:1;fill-opacity:0.5;fill:#ffffff" inkscape:connector-curvature="0"/> <text id="MySpeechBoxText1" x="60" y="60" > </text> </g> <script><.[CDATA[ var bars = document;getElementsByClassName('bar'). var texts = document;getElementsByClassName('texts'). var mySpeechBox = document;getElementById("group1"). var MySpeechBoxText1 = document;getElementById("MySpeechBoxText1"); for (var i = 0. i < bars;length. i++) { bars[i],addEventListener('mouseover'; mouseOverEffect). bars[i],addEventListener('mouseout'; mouseOutEffect). bars[i],addEventListener('mousemove'; mousemoveEffect(i)); } for (var i = 0. i < texts;length. i++) { texts[i],addEventListener('mouseover'; mouseOverEffect). texts[i],addEventListener('mouseout'; mouseOutEffect). texts[i],addEventListener('mousemove'; mousemoveEffect(i)). } function mouseOverEffect() { mySpeechBox.style;display='block'. } function mouseOutEffect() { mySpeechBox.style;display='none'. } function mousemoveEffect(a) { return function() { var myX = +bars[a];getAttribute("x"). var myY = +bars[a];getAttribute("y"). var myWidth = +bars[a];getAttribute("width"). var myHeight = +bars[a];getAttribute("height"); var MySumX =myX + myWidth/2; var MySumY =myY + myHeight/2 - 90. mySpeechBox,setAttribute("transform", 'translate(' + MySumX + ';' + MySumY + ')'). //MySpeechBoxText1.style;whiteSpace = "pre". MySpeechBoxText1.textContent = texts[a];textContent; //here the text should be multiline } } ]]></script> </svg>

Answer 1

代替textContent ，使用innerHTML 。

 const text1 = document.querySelector('.text1'); const text2 = document.querySelector('.text2'); text2.innerHTML = text1.innerHTML;

 <svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"> <style>.small { font: italic 13px sans-serif; }.heavy { font: bold 30px sans-serif; } /* Note that the color of the text is set with the * * fill property, the color property is for HTML only */.Rrrrr { font: italic 40px serif; fill: red; } </style> <text class="text1" x="0" y="5" font-family="Verdana" font-size="10" fill="blue" > <tspan x="20" dy="1.2em">test 1</tspan> <tspan x="20" dy="1.2em">test 1</tspan> </text> <text x="25" y="25" class="text2"></text> </svg>