我正在处理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