如何在 SVG 1.1 中正确显示多行文本？答案

【问题标题】：How to properly display multiline text in SVG 1.1?如何在 SVG 1.1 中正确显示多行文本？
【发布时间】：2011-04-24 21:21:42
【问题描述】：

我想获取一个多行文本块并在 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 来说是不可接受的。

【问题讨论】：

标签： text svg multiline

【解决方案1】：

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 似乎也做得更好。

【讨论】：

有人试过这个吗？我尝试在包含 flowRoot/flowPara 元素的 SVG 文档上设置 version="1.2"，而 batik-rasterizer.jar 根本没有呈现可流动的文本（Inkscape 会）。它还发出了关于"text-align: justify" 的警告，在1.2 中有效。我还尝试设置baseProfile="tiny" 和"full"。此外，en.wikipedia.org/wiki/… 表示 Batik 不支持任何 1.2-full，仅支持部分 1.2-tiny。
作为一个非常晚的 FYI：xmlgraphics.apache.org/batik/status.html - 一般支持的内容 xmlgraphics.apache.org/batik/dev/svg12.html - SVG 1.2 支持 - 关于流动文本的说明

【解决方案2】：

或者，foreignObject 将允许您包含 html：

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

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

【讨论】：

试试kitandmarcin.us/svgcontainer.html - 我在那个页面上使用了foreignObjects（在嵌入中）。
蜡染不支持异物

【解决方案3】：

我建议 <text> 和 <tspan> 孩子。 Inkscape 可以很容易地为您生成，只需不要单击并拖动区域，而是只需单击您想要文本的位置并开始书写，然后在您想要换行的地方按回车。

【讨论】：

【解决方案4】：

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

如果您不需要文字换行（而且您似乎不需要，但我不明白您所说的“我想将行保留为行”是什么意思），我建议您使用基本的 @ 987654322@元素。

【讨论】：

Opera 从不支持 flow* 元素。但是它确实支持 SVG Tiny 1.2 textArea 元素。所有这些都可以通过这里的文档看到：opera.com/docs/specs
我认为你是对的@Tangui。 text/tspan 技术也很尴尬。我需要动态创建和提供 tspan 元素的间距，这增加了很多复杂性。（我从 Batik 插入 Java 中的文本。直到运行时才知道文本的数量。）
不幸的是，您不能通过 foreignObject 使用 XHtml，因为 Batik 不支持它。您也可以使用 SVG DOM 来获取文本长度（使用 getComputedLength/getStartPositionOfChar/getEndPositionOfChar 方法），但我不确定这是否与您对 Batik 的使用兼容。