Как правильно отображать многострочный текст в SVG 1.1?

Question

Я хотел бы взять многострочный блок текста и отобразить его в SVG. Я хотел бы сохранить линии как линии. Есть ли правильный способ сделать это?

Я использую Inkscape для базового рисунка и Batik для рендеринга. Кажется, эти двое не согласны с тем, как это сделать.

Inkscape создает такую ​​структуру:

<flowRoot
       xml:space="preserve"
       id="flowRoot3089"
       style="font-size:16px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       transform="translate(19.71875,334.88681)">
   <flowRegion id="flowRegion3091">
        <rect id="rect3093" width="50.78125" height="75" x="34.765625" y="155.89932"/>
   </flowRegion>

    <flowPara id="flowPara3123">Item 1</flowPara>
    <flowPara id="flowPara3137">Item 2</flowPara>
    <flowPara id="flowPara3139">Item 3</flowPara>
</flowRoot>

Однако по какой-то причине это не приемлемо для батика.

Answer 1

Inkscape устанавливает версию документа SVG в 1.1 вместо 1.2, но все еще использует текущий текст.

Простое решение для вас - отредактировать документ svg и изменить атрибут версии SVG на 1.2. Inkscape не изменит его обратно на 1.1, и он прекрасно работает со спецификатором версии 1.2.

Затем Батик будет рад предоставить большую часть функциональности, однако вы также столкнетесь с другой ошибкой Inkscape, если будете связываться практически с любыми текстовыми атрибутами в корневом каталоге потока, которые создает Inkscape. Он устанавливает цвет фона на выбранный цвет переднего плана для текста, что означает, что если вы установите красный цвет текста в Inkscape, когда батик отобразит его, вы увидите красный квадрат... текст есть, но его красный тоже так не реально видно. Это ошибка Inkscape, и она хорошо видна в коде для элемента flowRegion -> rect.

Решение состоит в том, чтобы вручную редактировать атрибуты flowRect после настройки их с помощью inkscape.

Батик также, кажется, будет лучше, если вы будете использовать стандартный вывод svg вместо вывода inkscape svg.

Answer 2

Это неприемлемо, так как элементы flow* являются нестандартными элементами. Он взят из черновика SVG1.2, который никогда не был принят, и предназначен для переноса текста в произвольные формы. Только Inkscape и некоторые сборки Opera поддерживают его. Так что не используйте его, по крайней мере, на данный момент.

Если вам не нужно переносить текст (и вы, кажется, этого не делаете, но я не понимаю, что вы подразумеваете под "я хотел бы, чтобы строки были линиями"), я предлагаю вам использовать основные <text/> элемент.

Answer 3

Я бы предложил <text> с <tspan> дети. Inkscape может сгенерировать это для вас довольно легко, просто не перетаскивайте область, а просто щелкните там, где вы хотите текст и начните писать, нажмите return там, где вы хотите новую строку.

Answer 4

Кроме того, foreignObject позволит вам включить HTML:

<svg:foreignObject><html:body><div>text here</html:div></html:body></svg:foreignObject>

Похоже, не работает в Opera или IE.