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>

但是，由于某些原因，这对Batik来说是不可接受的。

Answer 1

Inkscape将文档的SVG版本设置为1.1而不是1.2，但仍使用流动文本。

您的简单解决方案是编辑svg文档并将SVG版本属性更改为1.2。 Inkscape不会将其更改回1.1，它可以处理1.2版本说明符。

然后，Batik会很乐意提供大多数功能，但如果您在Inkscape创建的流程根目录中混淆了几乎任何文本属性，那么您还会遇到另一个Inkscape错误。它将背景颜色设置为文本的选定前景色，这意味着如果在Inkscape中将文本颜色设置为红色，当蜡染渲染它时，您将看到一个红色方块......文本在那里，但是它的红色也是，所以不太明显。这是一个Inkscape错误，在flowRegion的代码中清晰可见 - ＆gt; rect元素。

解决方案是在使用inkscape进行调整后手动编辑flowRect属性。

如果您使用标准的svg输出而不是inkscape svg输出，那么Batik似乎也会做得更好。

Answer 2

这是不可接受的，因为flow *元素是非标准元素。它来自一个从未被接受过的SVG1.2草案，它被设计为以自定义形状包装文本。只有Inkscape和Opera的一些版本支持它。所以，不要使用它，至少目前是这样。

如果你不需要文本包装（你似乎没有，但我不明白你的意思“我想把这些行保持为行”），我建议你使用基本{ {1}}元素。

Answer 3

我建议<text>个<tspan>个孩子。 Inkscape可以非常轻松地为您生成，只需不要单击并拖动某个区域，而只需单击您想要文本的位置并开始书写，然后按返回所需的新行。

Answer 4

或者，foreignObject允许你包含html：

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

但似乎在Opera或IE中不起作用。

如何在SVG 1.1中正确显示多行文字？

4 个答案: