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 tspan
s
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>