1

有没有办法在 SVG 文本块中的某些文本上创建换行符，而不使用 tspan？

我的客户希望能够将内容添加到 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>
4

1 回答 1

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

于 2018-12-05T12:51:53.503 回答