SVG Inkscape 生成的文件在浏览器上不显示 flowRoot 对象

Question

我正在处理 SVG 文件，以便使用 AJAX 在浏览器上制作一些实时动画。

一切都很好，除了让浏览器（Chrome 或 IE9）显示 SVG 图像。以下 HTML 文件不显示 flowRoot 文本：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="744.09448"
   height="600"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="lcl22.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="175.99454"
     inkscape:cy="282.7269"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="706"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-452.36215)">
    <path
       sodipodi:type="arc"
       style="fill:#008000;fill-opacity:1;stroke:#495677;stroke-width:23.16900063;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="circle1"
       sodipodi:cx="227.14285"
       sodipodi:cy="156.6479"
       sodipodi:rx="47.142857"
       sodipodi:ry="44.285713"
       d="m 274.28571,156.6479 c 0,24.45833 -21.10658,44.28572 -47.14286,44.28572 C 201.10657,200.93362 180,181.10623 180,156.6479 c 0,-24.45832 21.10657,-44.28571 47.14285,-44.28571 26.03628,0 47.14286,19.82739 47.14286,44.28571 z"
       inkscape:label="#path2985"
       transform="translate(12.857143,635.71428)" />
    <rect
       style="fill:#00ff00;fill-opacity:1;stroke:#495677;stroke-width:4.86899996;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="box1"
       width="284.28571"
       height="110"
       x="312.85715"
       y="738.07648"
       inkscape:label="#box1" />
    <flowRoot
       xml:space="preserve"
       id="flowRoot3058"
       style="font-size:40px;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;text-anchor:middle;text-align:center"
       transform="translate(0,452.36215)"><flowRegion
         id="flowRegion3060"><rect
           id="rect3062"
           width="365.71429"
           height="100"
           x="221.42857"
           y="145.71428"
           style="text-anchor:middle;text-align:center" /></flowRegion><flowPara
         id="flowPara3064"
         style="font-weight:bold;-inkscape-font-specification:Sans Bold">LCL22 TEST</flowPara></flowRoot>  </g>
</svg>

我尝试通过更改以下行将代码更改为 1.2 版，但没有解决问题...

   version="1.2"

我需要一种简单的方法来编辑自定义矢量图形并将其带入浏览器。我原以为 SVG 会是小菜一碟，但我遇到了这些问题……

任何帮助表示赞赏。

路数

Answer 1

正如其他人所说，您可以使用 convert to text 或 unflow 来删除 flowRoot。

但请记住，文本将不再停留在您指定的边界内。

为避免 flowRoot 继续前进，只需使用文本工具单击并开始输入，而不是先拖动设置边界。

要创建适合边界框的文本，我不确定最好的方法是什么。

Answer 2

The SVG 1.2 Full specification was never completed（从链接中可以看出，它仍处于 2005 年的草稿中）我认为只有 Inkscape 支持 flowRoot。我不认为 flowRoot 会成为 SVG 2 的一部分，因为它可能会使用不同且更兼容 CSS 的机制来实现流动文本，因此最好避免使用 flowRoot。

使用“文本”菜单中的“转换为文本”命令将其转换为符合 SVG 1.1 的文本。