SVG: добавить разрыв строки в текст без tspan - PullRequest
Новая
       34

SVG: добавить разрыв строки в текст без tspan

0 голосов
/ 05 декабря 2018

Есть ли способ создать разрыв строки для некоторого текста в текстовом блоке SVG без использования tspan?

Мой клиент хочет иметь возможность добавлять содержимое в редактор расширенных настраиваемых полей в Wordpress,добавить
или

и добавить этот разрыв строки к тексту в диаграмме SVG?

Я знаю, что разрывы строк можно добавить с помощью , но клиент не хочетчтобы закодировать это в динамический контент, который вытягивается в диаграмму SVG через PHP.

Например, в настоящее время у меня есть: 

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

Какие выходные данные:

НЕКОТОРЫЕ
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>

1 Ответ

0 голосов
/ 05 декабря 2018

Нет, нет.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;

...