Auto quebra de linha em texto SVG

Eu gostaria de exibir um no SVG que seria o auto-line-wrap para o container da mesma forma que o texto HTML preenche os elementos

. Existe uma forma de fazer isso? Eu não quero posicionar as linhas de forma usando s.

A quebra de texto não faz parte do SVG1.1, a especificação atualmente implementada. Você deve preferir usar HTML através do elemento .

    

Text goes here

Your SVG viewer cannot display html.

Aqui está uma alternativa:

       

Text goes here

No automatic linewrapping.

Observando que, mesmo que foreignObject possa ser relatado como suportado com esse recurso, não há garantia de que o HTML possa ser exibido, porque isso não é exigido pela especificação do SVG 1.1. Não há nada de importante para o suporte a html-in-foreignobject no momento. No entanto, ainda é suportado em muitos navegadores, por isso é provável que se torne necessário no futuro, talvez com uma característica correspondente.

Observe que o elemento ‘textArea’ no SVG Tiny 1.2 suporta todos os resources svg padrão, por exemplo, preenchimento avançado etc, e que você pode especificar largura ou altura como automático, o que significa que o texto pode fluir livremente nessa direção. ForeignObject atua como viewport de recorte.

Nota: enquanto o exemplo acima é conteúdo SVG 1.1 válido, no SVG 2 o atributo ‘requiredFeatures’ foi removido, o que significa que o elemento ‘switch’ tentará renderizar o primeiro elemento ‘g’ independentemente de ter suporte para o SVG 1.2 ‘textArea ‘elementos. Veja a especificação do elemento de comutação SVG2 .

Essa funcionalidade também pode ser adicionada usando JavaScript. Carto.net tem um exemplo:

http://old.carto.net/papers/svg/textFlow/

Outra coisa que também pode ser útil é que você é uma área de texto editável:

http://old.carto.net/papers/svg/gui/textbox/

O textPath pode ser bom em alguns casos.

        This is a long long long text ......   

Com base no código do @Mike Gledhill, eu dei um passo adiante e adicionei mais parâmetros. Se você tem um SVG RECT e quer o texto para dentro, isso pode ser útil:

 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 < words.length; n++) { line2 = line + words[n] + " "; testing.textContent = line2; testwidth = testing.getBBox().width; if ((testwidth + 2*padding) > 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 }; 

Se você fosse usar d3.js, isso poderia ajudar: https://bl.ocks.org/mbostock/7555321

Eu publiquei o seguinte passo a passo para adicionar algumas palavras falsas para um elemento “texto” em SVG aqui:

SVG Word Wrap – Show stopper?

Você só precisa adicionar uma function JavaScript simples, que divide sua string em elementos “tspan” mais curtos. Aqui está um exemplo do que parece:

Exemplo SVG

Espero que isto ajude !

O código a seguir está funcionando bem. Execute o trecho de código do que ele faz.

Talvez seja possível limpá-lo ou fazê-lo funcionar automaticamente com todas as tags de texto no SVG.

 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 = 'busy'; for (var n = 0; n < 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 > width && n > 0) { element.innerHTML += '' + line + ''; line = words[n] + ' '; } else { line = testLine; } } element.innerHTML += '' + line + ''; document.getElementById("PROCESSING").remove(); } svg_textMultiline(); 
 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; } 
  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.  
Intereting Posts