如何在 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

使用innerHTML，而不是textContent。

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>