blocks|key|1002643|text|文本换行不是SVG1.1的一部分，SVG1.1是当前实现的规范。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1002644|如果要在Web上使用SVG图形，可以通过<foreignObject/>元素将HTML嵌入到SVG中。示例：|offset|length|style|CODE|1002645|<svg+...>

<switch>
<foreignObject+x="20"+y="90"+width="150"+height="200">
<p+xmlns="http://www.w3.org/1999/xhtml">Text+goes+here</p>
</foreignObject>

<text+x="20"+y="20">Your+SVG+viewer+cannot+display+html.</text>
</switch>

</svg>|code-block|syntax|javascript|1002646|如果您的目标是没有HTML支持的纯SVG渲染器，或者希望图形可以使用专业的矢量图形处理软件(Adobe+Illustrator、Inkscape等)进行编辑，则此解决方案可能不适合您。|1002647|entityMap^0|0|K|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Text wrapping is not part of SVG1.1, the currently implemented spec.</p>
<p>In case you are going to use your SVG graphic on the Web, you can embed HTML inside SVG via the <code>&lt;foreignObject/&gt;</code> element. Example:</p>
<pre><code>&lt;svg ...&gt;

&lt;switch&gt;
&lt;foreignObject x=&quot;20&quot; y=&quot;90&quot; width=&quot;150&quot; height=&quot;200&quot;&gt;
&lt;p xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;Text goes here&lt;/p&gt;
&lt;/foreignObject&gt;

&lt;text x=&quot;20&quot; y=&quot;20&quot;&gt;Your SVG viewer cannot display html.&lt;/text&gt;
&lt;/switch&gt;

&lt;/svg&gt;
</code></pre>
<p>If you are targeting a pure SVG renderer without HTML support or want your graphic to be editable using professional vector graphics manipulation software (Adobe Illustrator, Inkscape, ...), this solution will probably not suit you.</p>


blocks|key|788667|text|也可以使用JavaScript添加此功能。Carto.net有一个例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|788668|http://old.carto.net/papers/svg/textFlow/|offset|length|788669|可编辑文本区域也可能对您有用：|788670|http://old.carto.net/papers/svg/gui/textbox/|788671|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|15|0|0|0|0|18|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|I]]]]

<p>This functionality can also be added using JavaScript. Carto.net has an example:</p>

<p><a href="http://old.carto.net/papers/svg/textFlow/" rel="nofollow noreferrer">http://old.carto.net/papers/svg/textFlow/</a></p>

<p>Something else that also might be useful to are you are editable text areas:</p>

<p><a href="http://old.carto.net/papers/svg/gui/textbox/" rel="nofollow noreferrer">http://old.carto.net/papers/svg/gui/textbox/</a></p>


blocks|key|788757|text|我在这里发布了下面的演练，用于向SVG+"text“元素添加一些假的换行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|788758|SVG+Word+Wrap+-+Show+stopper?|offset|length|788759|您只需要添加一个简单的JavaScript函数，该函数将字符串拆分为更短的"tspan“元素。下面是一个示例，展示了它的外观：|788760|​|788761|📷|atomic|788762|788763|希望这能有所帮助！|788764|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/475804/svg-word-wrap-show-stopper|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d5bc9d6f9e461a68008791a7ed98d558.png|imageAlt^0|0|0|T|0|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|M|3|I|5|6|7|1E|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1F|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]|X|$5|Y|T|Z|A|$10|11|12|-4]]]]

<p>I have posted the following walkthrough for adding some fake word-wrapping to an SVG "text" element here:</p>

<p><a href="https://stackoverflow.com/questions/475804/svg-word-wrap-show-stopper">SVG Word Wrap - Show stopper?</a></p>

<p>You just need to add a simple JavaScript function, which splits your string into shorter "tspan" elements.  Here's an example of what it looks like:</p>

<p><img src="https://i.stack.imgur.com/Bpvui.png" alt="Example SVG"></p>

<p>Hope this helps !</p>


blocks|key|1002763|text|在某些情况下，textPath可能是好的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1002764|<svg+width="200"+height="200"
++++xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
++
++<path+id="path1"+d="M10,30+H190+M10,60+H190+M10,90+H190+M10,120+H190"></path>
+</defs>
+<use+xlink:href="#path1"+x="0"+y="35"+stroke="blue"+stroke-width="1"+/>
+<text+transform="translate(0,35)"+fill="red"+font-size="20">
++<textPath+xlink:href="#path1">This+is+a+long+long+long+text+......</textPath>
+</text>
</svg>|code-block|syntax|javascript|1002765|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The textPath may be good for some case.</p>

<pre><code>&lt;svg width="200" height="200"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
 &lt;defs&gt;
  &lt;!-- define lines for text lies on --&gt;
  &lt;path id="path1" d="M10,30 H190 M10,60 H190 M10,90 H190 M10,120 H190"&gt;&lt;/path&gt;
 &lt;/defs&gt;
 &lt;use xlink:href="#path1" x="0" y="35" stroke="blue" stroke-width="1" /&gt;
 &lt;text transform="translate(0,35)" fill="red" font-size="20"&gt;
  &lt;textPath xlink:href="#path1"&gt;This is a long long long text ......&lt;/textPath&gt;
 &lt;/text&gt;
&lt;/svg&gt;
</code></pre>


blocks|key|788832|text|在@Mike+Gledhill的代码基础上，我更进一步，添加了更多参数。如果您有一个SVG+RECT，并希望文本在其中换行，这可能很方便：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|788833|function+wraptorect(textnode,+boxObject,+padding,+linePadding)+{

++++var+x_pos+=+parseInt(boxObject.getAttribute('x')),
++++y_pos+=+parseInt(boxObject.getAttribute('y')),
++++boxwidth+=+parseInt(boxObject.getAttribute('width')),
++++fz+=+parseInt(window.getComputedStyle(textnode)['font-size']);++//+We+use+this+to+calculate+dy+for+each+TSPAN.

++++var+line_height+=+fz+%2B+linePadding;

//+Clone+the+original+text+node+to+store+and+display+the+final+wrapping+text.

+++var+wrapping+=+textnode.cloneNode(false);++++++++//+False+means+any+TSPANs+in+the+textnode+will+be+discarded
+++wrapping.setAttributeNS(null,+'x',+x_pos+%2B+padding);
+++wrapping.setAttributeNS(null,+'y',+y_pos+%2B+padding);

//+Make+a+copy+of+this+node+and+hide+it+to+progressively+draw,+measure+and+calculate+line+breaks.

+++var+testing+=+wrapping.cloneNode(false);
+++testing.setAttributeNS(null,+'visibility',+'hidden');++//+Comment+this+out+to+debug

+++var+testingTSPAN+=+document.createElementNS(null,+'tspan');
+++var+testingTEXTNODE+=+document.createTextNode(textnode.textContent);
+++testingTSPAN.appendChild(testingTEXTNODE);

+++testing.appendChild(testingTSPAN);
+++var+tester+=+document.getElementsByTagName('svg')[0].appendChild(testing);

+++var+words+=+textnode.textContent.split("+");
+++var+line+=+line2+=+"";
+++var+linecounter+=+0;
+++var+testwidth;

+++for+(var+n+=+0;+n+<+words.length;+n%2B%2B)+{

++++++line2+=+line+%2B+words[n]+%2B+"+";
++++++testing.textContent+=+line2;
++++++testwidth+=+testing.getBBox().width;

++++++if+((testwidth+%2B+2*padding)+>+boxwidth)+{

++++++++testingTSPAN+=+document.createElementNS('http://www.w3.org/2000/svg',+'tspan');
++++++++testingTSPAN.setAttributeNS(null,+'x',+x_pos+%2B+padding);
++++++++testingTSPAN.setAttributeNS(null,+'dy',+line_height);

++++++++testingTEXTNODE+=+document.createTextNode(line);
++++++++testingTSPAN.appendChild(testingTEXTNODE);
++++++++wrapping.appendChild(testingTSPAN);

++++++++line+=+words[n]+%2B+"+";
++++++++linecounter%2B%2B;
++++++}
++++++else+{
++++++++line+=+line2;
++++++}
++++}

++++var+testingTSPAN+=+document.createElementNS('http://www.w3.org/2000/svg',+'tspan');
++++testingTSPAN.setAttributeNS(null,+'x',+x_pos+%2B+padding);
++++testingTSPAN.setAttributeNS(null,+'dy',+line_height);

++++var+testingTEXTNODE+=+document.createTextNode(line);
++++testingTSPAN.appendChild(testingTEXTNODE);

++++wrapping.appendChild(testingTSPAN);

++++testing.parentNode.removeChild(testing);
++++textnode.parentNode.replaceChild(wrapping,textnode);

++++return+linecounter;
}

document.getElementById('original').onmouseover+=+function+()+{

++++var+container+=+document.getElementById('destination');
++++var+numberoflines+=+wraptorect(this,container,20,1);
++++console.log(numberoflines);++//+In+case+you+need+it

};|code-block|syntax|javascript|788834|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Building on @Mike Gledhill's code, I've taken it a step further and added more parameters. If you have a SVG RECT and want text to wrap inside it, this may be handy:</p>

<pre><code>function wraptorect(textnode, boxObject, padding, linePadding) {

    var x_pos = parseInt(boxObject.getAttribute('x')),
    y_pos = parseInt(boxObject.getAttribute('y')),
    boxwidth = parseInt(boxObject.getAttribute('width')),
    fz = parseInt(window.getComputedStyle(textnode)['font-size']);  // We use this to calculate dy for each TSPAN.

    var line_height = fz + linePadding;

// Clone the original text node to store and display the final wrapping text.

   var wrapping = textnode.cloneNode(false);        // False means any TSPANs in the textnode will be discarded
   wrapping.setAttributeNS(null, 'x', x_pos + padding);
   wrapping.setAttributeNS(null, 'y', y_pos + padding);

// Make a copy of this node and hide it to progressively draw, measure and calculate line breaks.

   var testing = wrapping.cloneNode(false);
   testing.setAttributeNS(null, 'visibility', 'hidden');  // Comment this out to debug

   var testingTSPAN = document.createElementNS(null, 'tspan');
   var testingTEXTNODE = document.createTextNode(textnode.textContent);
   testingTSPAN.appendChild(testingTEXTNODE);

   testing.appendChild(testingTSPAN);
   var tester = document.getElementsByTagName('svg')[0].appendChild(testing);

   var words = textnode.textContent.split(" ");
   var line = line2 = "";
   var linecounter = 0;
   var testwidth;

   for (var n = 0; n &lt; words.length; n++) {

      line2 = line + words[n] + " ";
      testing.textContent = line2;
      testwidth = testing.getBBox().width;

      if ((testwidth + 2*padding) &gt; boxwidth) {

        testingTSPAN = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
        testingTSPAN.setAttributeNS(null, 'x', x_pos + padding);
        testingTSPAN.setAttributeNS(null, 'dy', line_height);

        testingTEXTNODE = document.createTextNode(line);
        testingTSPAN.appendChild(testingTEXTNODE);
        wrapping.appendChild(testingTSPAN);

        line = words[n] + " ";
        linecounter++;
      }
      else {
        line = line2;
      }
    }

    var testingTSPAN = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
    testingTSPAN.setAttributeNS(null, 'x', x_pos + padding);
    testingTSPAN.setAttributeNS(null, 'dy', line_height);

    var testingTEXTNODE = document.createTextNode(line);
    testingTSPAN.appendChild(testingTEXTNODE);

    wrapping.appendChild(testingTSPAN);

    testing.parentNode.removeChild(testing);
    textnode.parentNode.replaceChild(wrapping,textnode);

    return linecounter;
}

document.getElementById('original').onmouseover = function () {

    var container = document.getElementById('destination');
    var numberoflines = wraptorect(this,container,20,1);
    console.log(numberoflines);  // In case you need it

};
</code></pre>


blocks|key|1003127|text|下面的代码运行良好。运行它所做的代码片段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1003128|也许它可以被清理掉，或者让它与SVG中的所有文本标签一起自动工作。|1003129|​|1003130|function+svg_textMultiline()+{

++var+x+=+0;
++var+y+=+20;
++var+width+=+360;
++var+lineHeight+=+10;
++
++

++/*+get+the+text+*/
++var+element+=+document.getElementById('test');
++var+text+=+element.innerHTML;

++/*+split+the+words+into+array+*/
++var+words+=+text.split('+');
++var+line+=+'';

++/*+Make+a+tspan+for+testing+*/
++element.innerHTML+=+'<tspan+id="PROCESSING">busy</tspan+>';

++for+(var+n+=+0;+n+<+words.length;+n%2B%2B)+{
++++var+testLine+=+line+%2B+words[n]+%2B+'+';
++++var+testElem+=+document.getElementById('PROCESSING');
++++/*++Add+line+in+testElement+*/
++++testElem.innerHTML+=+testLine;
++++/*+Messure+textElement+*/
++++var+metrics+=+testElem.getBoundingClientRect();
++++testWidth+=+metrics.width;

++++if+(testWidth+>+width+&&+n+>+0)+{
++++++element.innerHTML+%2B=+'<tspan+x="0"+dy="'+%2B+y+%2B+'">'+%2B+line+%2B+'</tspan>';
++++++line+=+words[n]+%2B+'+';
++++}+else+{
++++++line+=+testLine;
++++}
++}
++
++element.innerHTML+%2B=+'<tspan+x="0"+dy="'+%2B+y+%2B+'">'+%2B+line+%2B+'</tspan>';
++document.getElementById("PROCESSING").remove();
++
}


svg_textMultiline();|code-block|syntax|javascript|1003131|body+{
++font-family:+arial;
++font-size:+20px;
}
svg+{
++background:+#dfdfdf;
++border:1px+solid+#aaa;
}
svg+text+{
++fill:+blue;
++stroke:+red;
++stroke-width:+0.3;
++stroke-linejoin:+round;
++stroke-linecap:+round;
}|1003132|<svg+height="300"+width="500"+xmlns="http://www.w3.org/2000/svg"+version="1.1">

++<text+id="test"+y="0">GIETEN+-+Het+college+van+Aa+en+Hunze+is+in+de+fout+gegaan+met+het+weigeren+van+een+zorgproject+in+het+failliete+hotel+Braams+in+Gieten.+Dat+stelt+de+PvdA-fractie+in+een+brief+aan+het+college.+De+partij+wil+opheldering+over+de+kwestie+en+heeft+schriftelijke
++++vragen+ingediend.+Verkeerde+route+De+PvdA+vindt+dat+de+gemeenteraad+eerst+gepolst+had+moeten+worden,+voordat+het+college+het+plan+afwees.+"Volgens+ons+is+de+verkeerde+route+gekozen",+zegt+PvdA-raadslid+Henk+Santes.</text>

</svg>|1003133|1003134|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|U|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|M|3|N|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|O|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>The following code is working fine. Run the code snippet what it does.</p>

<p>Maybe it can be cleaned up or make it automatically work with all text tags in SVG.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function svg_textMultiline() {

  var x = 0;
  var y = 20;
  var width = 360;
  var lineHeight = 10;
  
  

  /* get the text */
  var element = document.getElementById('test');
  var text = element.innerHTML;

  /* split the words into array */
  var words = text.split(' ');
  var line = '';

  /* Make a tspan for testing */
  element.innerHTML = '&lt;tspan id="PROCESSING"&gt;busy&lt;/tspan &gt;';

  for (var n = 0; n &lt; words.length; n++) {
    var testLine = line + words[n] + ' ';
    var testElem = document.getElementById('PROCESSING');
    /*  Add line in testElement */
    testElem.innerHTML = testLine;
    /* Messure textElement */
    var metrics = testElem.getBoundingClientRect();
    testWidth = metrics.width;

    if (testWidth &gt; width &amp;&amp; n &gt; 0) {
      element.innerHTML += '&lt;tspan x="0" dy="' + y + '"&gt;' + line + '&lt;/tspan&gt;';
      line = words[n] + ' ';
    } else {
      line = testLine;
    }
  }
  
  element.innerHTML += '&lt;tspan x="0" dy="' + y + '"&gt;' + line + '&lt;/tspan&gt;';
  document.getElementById("PROCESSING").remove();
  
}


svg_textMultiline();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  font-family: arial;
  font-size: 20px;
}
svg {
  background: #dfdfdf;
  border:1px solid #aaa;
}
svg text {
  fill: blue;
  stroke: red;
  stroke-width: 0.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg height="300" width="500" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;

  &lt;text id="test" y="0"&gt;GIETEN - Het college van Aa en Hunze is in de fout gegaan met het weigeren van een zorgproject in het failliete hotel Braams in Gieten. Dat stelt de PvdA-fractie in een brief aan het college. De partij wil opheldering over de kwestie en heeft schriftelijke
    vragen ingediend. Verkeerde route De PvdA vindt dat de gemeenteraad eerst gepolst had moeten worden, voordat het college het plan afwees. "Volgens ons is de verkeerde route gekozen", zegt PvdA-raadslid Henk Santes.&lt;/text&gt;

&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|788965|text|我尝试了所有的答案，没有一个对我有效，我创建了noob解决方案，但它可以在没有未知代码行的情况下解决，尝试添加不带内容的附加文本标记，如果大于最大第一文本长度，则验证文本长度，将其余部分添加到另一个文本标记中，依此类推。您只需使用简单的JavaScript+if语句并更改文本内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|788966|++if+(data['clinic']['cicovidcliniccity'].length+>+35+&&+data['clinic']['cicovidcliniccity'].length+<+75)+{
++++const+cname+=+data['clinic']['cicovidcliniccity'];
++++const+ctext2_shodow+=+document.querySelector("#c_text2_shdow");
++++ctext2.textContent+=+cname.substring(1,+35)
++++ctext2_shodow.textContent+=+cname.substring(35,+cname.length);

++}

++if+(data['clinic']['cicovidcliniccity'].length+>+75+&&+data['clinic']['cicovidcliniccity'].length+<+110)+{
++++const+cname1+=+data['clinic']['cicovidcliniccity'];
++++const+ctext2_shodow+=+document.querySelector("#c_text2_shdow");
++++const+ctext3_shodow+=+document.querySelector("#c_text3_shdow");
++++ctext2.textContent+=+cname1.substring(1,+35)
++++ctext2_shodow.textContent+=+cname1.substring(35,+75);
++++ctext3_shodow.textContent+=+cname1.substring(75,+cname1.length);

++}|code-block|syntax|javascript|788967|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I tried all answers None of them works with me only I created noob solution but it will solve without unknown lines of code, Try to add additional text tag without content and validate the text length if it &gt; than maximum first text length add the rest to another text tag and so on. you just need Simple JavaScript if statement and change the text Content</p>
<pre><code>  if (data['clinic']['cicovidcliniccity'].length &gt; 35 &amp;&amp; data['clinic']['cicovidcliniccity'].length &lt; 75) {
    const cname = data['clinic']['cicovidcliniccity'];
    const ctext2_shodow = document.querySelector(&quot;#c_text2_shdow&quot;);
    ctext2.textContent = cname.substring(1, 35)
    ctext2_shodow.textContent = cname.substring(35, cname.length);

  }

  if (data['clinic']['cicovidcliniccity'].length &gt; 75 &amp;&amp; data['clinic']['cicovidcliniccity'].length &lt; 110) {
    const cname1 = data['clinic']['cicovidcliniccity'];
    const ctext2_shodow = document.querySelector(&quot;#c_text2_shdow&quot;);
    const ctext3_shodow = document.querySelector(&quot;#c_text3_shdow&quot;);
    ctext2.textContent = cname1.substring(1, 35)
    ctext2_shodow.textContent = cname1.substring(35, 75);
    ctext3_shodow.textContent = cname1.substring(75, cname1.length);

  }
</code></pre>


<p>I would like to display a <code>&lt;text&gt;</code> in SVG what would auto-line-wrap to the container <code>&lt;rect&gt;</code> the same way as HTML text fills <code>&lt;div&gt;</code> elements. Is there a way to do it? I don't want to position lines separately by using <code>&lt;tspan&gt;</code>s.</p>


Auto line-wrapping in SVG text

容器

我想在SVG中显示一个<text>，它会自动换行到容器<rect>，就像HTML文本填充<div>元素一样。有办法做到这一点吗？我不想通过使用<tspan>s来单独定位行。

问SVG文本中的自动换行
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG文本中的自动换行EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG文本中的自动换行
EN