How do I set inline-size in an svg that contains text?

45 Views Asked by At

The SVG 2.0 specification states that the inline-size attribute can be used in text elements in order to have automatic text wrapping, here is an example code block of such an svg (taken from the above link):

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <text x="50" y="30" style="font: 20px sans-serif; inline-size: 200px">
    This text wraps at 200 pixels.
  </text>

</svg>

However it fails to render the text-wrapping effect on any browser I've tried.

I know that not all of the SVG 2.0 specification is yet implemented, but as this attribute is CSS styling, browsers like Mozilla Firefox should have this implemented, as stated here (where it says the style tag can be used to embed CSS styling) and here (where it says inline-size is a valid CSS style attribute).

I am, however, unable to recreate the example above. Is it simply the case that embedded styling in an SVG element does not yet support the inline-size attribute? If so I would appreciate a source in order to support this conclusion, since the Mozilla docs (shared above) explicitly claim full parity between the style tag in SVGs and HTML CSS styling.

0

There are 0 best solutions below