SVG: add a line-break to text without tspan

Question

Is there a way to create a line-break on some text in an SVG text block, without using tspan's?

My client wants to be able to add content into an Advanced Custom Field editor in Wordpress, add a < br > or < p >, and it add that line-break to the text in an SVG diagram?

I know line-breaks can be added with < tspan > but the client doesn't want to have to code that into dynamic content that is pulled into the SVG diagram via PHP.

For example, currently I have:

    <text transform="matrix(1 0 0 1 355.2294 118.67)" class="st6">
        <tspan x="0" y="0" class="st3 st4 st5">SOME</tspan>
        <tspan x="-24.8" y="12" class="st3 st4 st5">TEXT</tspan>
    </text>

Which outputs:

SOME
TEXT

But I need to make that text editable in Wordpress via a Custom field, so the client would enter the text in the WYSIWG with the line break, and it display the same in the SVG. (I don't want to have two separate fields for "social" and "Entrepreneurs" as he may change it to a single line in the future)...

So something like (but I know it wouldn't work):

Field:  Some < br > Text

<text transform="matrix(1 0 0 1 355.2294 118.67)" class="st6">
     <?php the_field('text'); ?>
</text>

Answer 1

No, there is not. SVG is a graphics format and the only way to get html formated text in it is to use a <foreignObject>. The only way to get the line breaks as you would like, is to process the input and generate those <tspan> elements.

But the code required to generate those <tspan> elements isn't that complicated.

assuming that $lines is an array of strings you can:

$tspans = [];
$lineheight = 10;

for ($i = 0; i < count($lines); $++) {
  $y = $i * $lineheight;
  $tspans[] = "<tspan x=\"0\" y=\"" . $y . "\">" . $line . "</tspan>";
}

$result = implode('', $tspans);

In other words, just multiply the linenumber by the line height and generate the resulting y value;