SVG Inkscape生成的文件在浏览器中无法显示flowRoot对象

25

我正在处理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会很容易,但是我困扰于这些问题...

非常感谢任何帮助。

Rds


请参考以下链接:https://bugs.launchpad.net/inkscape/+bug/167335 - YakovL
2个回答

31

SVG1.2完整规范从未完成(您可以从链接中看到,它仍然是2005年的草稿),只有Inkscape支持flowRoot。我认为flowRoot不会成为SVG2的一部分,因为该规范很可能会使用不同且更与CSS兼容的机制来实现流动文本,因此最好避免使用flowRoot。

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


Opera(Presto)从未支持flowRoot(仅在SVG 1.2 Full草案中)。它支持来自SVG 1.2 Tiny的textArea(这是w3c推荐)。 - Erik Dahlström
那么,我应该更改编辑器还是更改标签?流程根和派生物应该放什么?哪个编辑器更适合? - Mendes
有没有设置为默认的选项?我的意思是,为什么我必须转换每个创建的文本,有没有一种方法可以创建它已经兼容1.1? - YakovL
如果您不想编辑文本,也可以将其转换为路径。 - totymedli

6
如其他人所说,您可以使用“转换为文本”或“取消流动”来删除flowRoot。
但请记住,文本将不再保留您指定的边界。
为了避免以后出现flowRoot,请直接使用文本工具进行单击并开始输入,而不是首先拖动以设置其边界。
要创建适合于边界框的文本,我不确定最好的方法是什么。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接