I am having a problem with SVG. I would like the user to be able to write some text and from a certain length, it break a line automatically.

For now it's HTML, it works. I would like to know if this feature exists for SVG

Thanks a lot

CodePudding user response：

Currently there is no attribute on SVG's <text> element that allows for automatic text-wrapping.

Wrapping to tspans

However you can wrap text within a text-element using various <tspan> elements, from MDN WebDocs:

The SVG element defines a subtext within a element or another element. It allows for adjustment of the style and/or position of that subtext as needed.

Books

The tspan approach is also explained in-depth in the book:

• Amelia Bellamy-Royds (2015): SVG Text Layout, Chapter 4. Multiline SVG Text, O'Reilly, ISBN: 9781491933824

Proposals ongoing

A page in the W3C wiki from 2013 suggests: Proposals for Wrappping Text.

CodePudding user response：

You can fake something by drawing text on a path, but still looks ugly and no control over whitespace and linebreaks

<style>
  svg {
    background: lightgreen
  }
</style>
<svg viewbox="0 0 400 150">
  <path id="P" pathLength="100" d="M10 25h380M10 75h380M10 125h380" stroke="green"></path>
  <text>
    <textPath href="#P" startoffset="0" text-anchor="start" dominant-baseline="middle"
              fill="red" font-size="50px">Hello, what a wonderful SVG world this is</textPath>
  </text>
</svg>