0

I'm wrapping SVG text relative to a defined object using the "shape-inside" property. For example, text could be wrapped inside a cirle. Centering text horizontally inside the circle is easy by specifying "text-align: center", but how can the whole block of text (which wraps!) be aligned vertically with respect to the referenced "shape-inside" object?

The solutions presented here (Vertically align text inside of the svg circle) or here (vertical alignment of text element in SVG) do either not work (dominant-baseline does not do what I want, neither does "vertical-align" nor "alignment-baseline".

Minimal example:

<?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <circle x="10" y="10" r="50.0" id="border_circle"></circle>
    </defs>

    <circle x="10" y="10" r="50.0" style="fill: white; stroke: black" />
    <text xml:space="preserve" style="font-size:12px; shape-inside:url(#border_circle); text-align: center" dominant-baseline="central"><tspan>A long text wraps inside a circle</tspan></text>
</svg>

This is what I get vs. what I want to achieve (viewed in Inkscape): https://imgur.com/a/ly0b7iP

Note: JavaScript is not a solution to my problem, because I'm not in a browser and do not have JavaScript available. I am looking for a pure SVG solution.

enxaneta
  • 31,608
  • 5
  • 29
  • 42
performancematters
  • 65
  • 4
  • 1
    Svg text doesn't wrap – enxaneta Jun 17 '23 at 19:16
  • @enxaneta Yes it does. See "§11.7. Auto-wrapped text" of the SVG2 specification: https://www.w3.org/TR/SVG2/text.html#TextLayoutAuto – performancematters Jun 17 '23 at 20:48
  • 1
    TL;DR: no current browser has yet implemented this SVG2 feature – it's still a draft. Besides `shape-inside` is a CSS feature. To be even more pessimistic: SVG's **missing line-wrapping capabilities has quite a long history** of discontinued concepts/drafts. So if a documented code example doesn't run in Firefox, Chrome and Webkit - we can't use it. ... Things get even worse, if you expect your SVG to be rendered in a "non-browser" application (e.g graphic application, image previewer, office application etc.) SVG 1.2 is usually the best you can get. – herrstrietzel Jun 17 '23 at 22:40
  • @herrstrietzel as stated, I'm **not** in a browser. I do not care about rendering in any browser, I actually only care about rendering in Inkscape, which has SVG2 support. That's why I'm looking for a SVG2-compliant solution. – performancematters Jun 18 '23 at 07:58
  • Then post a [feature request](https://inkscape.org/fr/forums/beyond/how-to-report-bugs-or-request-new-features/) or search in the inkscape forum if there are any plugins solving your problem. See a [similar post](https://inkscape.org/forums/questions/how-to-automatically-vertical-center-align-the-text-inside-a-rectangle/). There is currently no such thing as 100% SVG2 compliance. Workaround: add `white-space:pre-line` to the text and tweak font-size and line-height. Open this [example in inkscape](https://codepen.io/herrstrietzel/pen/gOQrEzE) – herrstrietzel Jun 18 '23 at 17:45

0 Answers0