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

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

4 голосов
/ 13 октября 2010

Я хотел бы взять многострочный блок текста и отобразить его в 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>

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

Ответы [ 4 ]

5 голосов
/ 19 октября 2011

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.

4 голосов
/ 13 октября 2010

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

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

2 голосов
/ 13 октября 2010

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

1 голос
/ 19 февраля 2011

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

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

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

...