SVG Inkscape生成的文件不会在浏览器上显示flowRoot对象 [英] SVG Inkscape generated file does not show flowRoot objects on browser
本文介绍了SVG Inkscape生成的文件不会在浏览器上显示flowRoot对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理SVG文件，以便使用AJAX在浏览器上制作一些实时动画。
除了使浏览器（Chrome或IE9）显示SVG图像外，一切都很好。以下HTML文件不会显示flowRoot文本：
<？xml version =1.0encoding =UTF-8 standalone =no？>
<！ - 用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：工作
rdf：about =>
< dc：format> image / svg + xml< / dc：format>
< dc：type
rdf：resource =http://purl.org/dc/dcmitype/StillImage/>
< dc：title />
< / cc：工作>
< / rdf：RDF>
< / metadata>
inkscape：groupmode =layer
id =layer1
transform =translate（0， -452.36215）>
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）/>
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：正常;行高：125％;字母间距：0像素;字间距：0像素;填充：＃000000;填充不透明度：1;行程：无;字体家庭：无;文本锚：中部;文本的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
解决方案
在文本菜单中使用转换为文本命令将其转换为符合SVG 1.1的文本。
I´m dealing with SVG file in order to make some realtime animations on browser using AJAX.
Everything is fine except to make the browser (Chrome or IE9) to show the SVG image. The following HTML file does not show the flowRoot Text:
<?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>
I´ve tried to change the code to version 1.2 by changing the following line, but did not solve the problem...
version="1.2"
I need a easy way to edit and bring custom vector graphics to browser. I thought SVG would be a piece of cake, but I´m running aroud these kind of problems...
Any help appreciated.
Rds
解决方案
The SVG 1.2 Full specification was never completed (as you can see from the link it's still in draft from 2005) and only Inkscape ever supported flowRoot I think. I don't think it's intended that flowRoot will be part of SVG 2 either as that is likely to implement flowing text with a different and more CSS compatible mechanism so flowRoot is best avoided.
Use the Convert to text" command in the Text menu to convert it to SVG 1.1 compliant text.
这篇关于SVG Inkscape生成的文件不会在浏览器上显示flowRoot对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
