Text 如何在SVG 1.1中正确显示多行文本?

Text 如何在SVG 1.1中正确显示多行文本?,text,svg,multiline,Text,Svg,Multiline,我想获取一个多行文本块并在SVG中显示它。我想把台词保留为台词。有没有合适的方法 我使用Inkscape绘制我的基础图,使用蜡染进行渲染。看来两人在如何做到这一点上并不一致 Inkscape正在创建如下结构: <flowRoot xml:space="preserve" id="flowRoot3089" style="font-size:16px;font-style:normal;font-weight:normal;line-height:1

我想获取一个多行文本块并在SVG中显示它。我想把台词保留为台词。有没有合适的方法

我使用Inkscape绘制我的基础图,使用蜡染进行渲染。看来两人在如何做到这一点上并不一致

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>

项目1
项目2
项目3

但是,由于某些原因,蜡染不接受这种情况。

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


如果您不需要文本包装(而且您似乎也不需要,但我不明白您所说的“我希望将行保留为行”)的意思,我建议您使用基本的
元素。

我建议
儿童一起使用。Inkscape可以非常轻松地为您生成,只需单击并拖动区域,而只需单击需要文本的位置并开始书写,然后在需要新行的位置按return键。

或者,foreignObject将允许您包含html:

<svg:foreignObject><html:body><div>text here</html:div></html:body></svg:foreignObject>
这里的文本

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

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

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

Batik很乐意提供大部分功能,但是如果您在Inkscape创建的流根中处理了几乎任何文本属性,您也会遇到另一个Inkscape错误。它将背景色设置为文本的选定前景色,这意味着如果在Inkscape中将文本颜色设置为红色,当蜡染渲染它时,您将看到一个红色正方形。。。文本在那里,但它也是红色的,所以不是真正可见的。这是一个Inkscape错误,在flowRegion->rect元素的代码中清晰可见

解决方案是在使用inkscape调整flowRect属性后手动编辑它们


如果使用标准svg输出而不是inkscape svg输出,Batik似乎也会做得更好。

Opera从未支持flow*元素。但是,它确实支持SVG Tiny 1.2 textArea元素。所有这些都可以从这里的文档中看出:我认为您是对的@Tangui。text/tspan技术也很笨拙。我需要在运行中为tspan元素创建和提供间距,这会增加很多复杂性。(我正在从Batik插入Java文本。文本量在运行时才知道。)不幸的是,您不能通过foreignObject使用XHtml,因为Batik不支持它。您也可以使用SVG DOM获取文本长度(使用getComputedLength/getStartPositionOfChar/getEndPositionOfChar方法),但我不确定这是否与您使用的Batik兼容。请尝试-我在该页面(嵌入中)使用了foreignObjects。Batik不支持外来对象有人尝试过吗?我尝试在包含flowRoot/flowPara元素的SVG文档上设置version=“1.2”,batik-rasterizer.jar只是没有呈现可流动文本(Inkscape有)。它还发出了关于
“文本对齐:对齐”
的警告,该警告在1.2中有效。我还尝试设置了
baseProfile=“tiny”
“full”
。另外,Batik不支持任何1.2-full,只支持部分1.2-tiny。正如非常晚的FYI一样:-一般支持什么-SVG 1.2支持-流动文本注释