Question

是否可以在不使用tspan的情况下在SVG文本块中的某些文本上创建换行符？

我的客户希望能够将内容添加到Wordpress中的“高级自定义字段”编辑器中，添加
或

，并将该换行符添加到SVG图中的文本上？

我知道可以在中添加换行符，但是客户端不需要将其编码为可通过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；

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

1 个答案: