SVG：在没有tspan的文本上添加换行符

Question

有没有一种方法可以在不使用tspan的情况下在SVG文本块中的某些文本上创建换行符？

我的客户希望能够将内容添加到Wordpress中的“高级自定义字段”编辑器中，添加<br>或<p>，并将该换行符添加到SVG图中的文本上吗？

我知道可以在<tspan>中添加换行符，但客户端不需要将其编码为动态内容，该动态内容通过PHP提取到SVG图中。

例如，当前我有：

    <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>

哪个输出：

一些
文本

但是我需要通过“自定义”字段使该文本在Wordpress中可编辑，因此客户端将在WYSIWG中使用换行符输入文本，并在SVG中显示该文本。 （我不想为“社交”和“企业家”设置两个单独的字段，因为他将来可能会将其更改为一行）...

所以像（但我知道这行不通）：

Field:  Some < br > Text

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

Answer 1

不，那里没有。 SVG是一种图形格式，在其中获取html格式文本的唯一方法是使用<foreignObject> 。 获得所需的换行符的唯一方法是处理输入并生成这些<tspan>元素。

但是生成那些<tspan>元素所需的代码并不那么复杂。

假设$lines是一个字符串数组，您可以：

$tspans = [];
$lineheight = 10;

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

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

换句话说，只需将行号乘以行高并生成结果y值；