I would like to display a <text>
in SVG what would auto-line-wrap to the container <rect>
the same way as HTML text fills <div>
elements. Is there a way to do it? I don't want to position lines sparately by using <tspan>
s.
相关问题
- Illegal to have multiple roots (start tag in epilo
- React Native Inline style for multiple Text in sin
- Newtonsoft DeserializeXNode expands internal array
- how to use special characters like '<'
- XML - XSLT - document() function inside count() fu
相关文章
- 放在input的text下文本一直出现一个/(即使还没输入任何值)是什么情况
- Creating XML Elements without namespace declaratio
- Get Attribute Value From Simple XML Using JQuery /
- Make marker-end same color as path?
- Directly signing an Office Word document using XML
- How to display unicode in SVG?
- When sending XML to JMS should I use TextMessage o
- Converting svg to png with inkscape command line f
I have posted the following walkthrough for adding some fake word-wrapping to an SVG "text" element here:
SVG Word Wrap - Show stopper?
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:
Hope this helps !
Here's an alternative:
Noting that even though foreignObject may be reported as being supported with that featurestring, there's no guarantee that HTML can be displayed because that's not required by the SVG 1.1 specification. There is no featurestring for html-in-foreignobject support at the moment. However, it is still supported in many browsers, so it's likely to become required in the future, perhaps with a corresponding featurestring.
Note that the 'textArea' element in SVG Tiny 1.2 supports all the standard svg features, e.g advanced filling etc, and that you can specify either of width or height as auto, meaning that the text can flow freely in that direction. ForeignObject acts as clipping viewport.
Note: while the above example is valid SVG 1.1 content, in SVG 2 the 'requiredFeatures' attribute has been removed, which means the 'switch' element will try to render the first 'g' element regardless of having support for SVG 1.2 'textArea' elements. See SVG2 switch element spec.
Text wrapping is not part of SVG1.1, the currently implemented spec. You should rather use HTML via the
<foreignObject/>
element.The textPath may be good for some case.
The following code is working fine. Run the code snippet what it does.
Maybe it can be cleaned up or make it automatically work with all text tags in SVG.
If you were to use d3.js, this could help: https://bl.ocks.org/mbostock/7555321