0

This SVG text will be displayed in 2 lines on Firefox, but in just 1 line on Chrome:

document.querySelector("text").textContent = "This is the first line \n This is the second line";
text {
  white-space: pre;
}
<svg>
  <text x="10" y="50"></text>
</svg>

Is there any reliable source describing the current compatibility of white-space: pre; in an SVG text with newline characters? I've looked at MDN, Caniuse etc. but couldn't find anything.

(by the way I believe there's nothing in the specs and Firefox implementation decided to do that independently, is that correct?)

  • Sorry, there are no multyline layout concepts available for svg `` elements. You need to emulate line breaks by splitting text into `` elements. See [How to display multiple lines of text in SVG?](https://stackoverflow.com/questions/31469134/how-to-display-multiple-lines-of-text-in-svg). There is a draft of a [`inline-size`](https://www.w3.org/TR/SVG2/text.html#InlineSize) attribute but it's currently not supported by any major browser. – herrstrietzel Feb 02 '23 at 05:22
  • @herrstrietzel thanks for your comment, but I know all that (tspan) already. I'm just asking about this strange Firefox implementation. –  Feb 02 '23 at 06:18

1 Answers1

3
  • white-space was not an SVG property in SVG 1.1
  • white-space is an SVG property in SVG 2 and should work as it does with HTML text
  • only Firefox has implemented this part of the SVG 2 specification so far
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Thanks a lot, and specially thanks for the "Browser compatibility" link. –  Feb 02 '23 at 06:48