如果我将以下内容另存为测试.html它在浏览器中工作正常,但如果我将其另存为 test.svg它不会动画。
<svg width="1920" height="1080" viewBox="0 0 800 300">
<circle id = "internalcircle" r="100" cx="100" cy="50" stroke = "#999" fill = "none" stroke-dasharray="4"/>
<circle id = "internalcircle" r="60" cx="100" cy="50" stroke = "#999" fill = "none" stroke-dasharray="4"/>
<g>
<circle id="1" r="16" fill="white" stroke="#999" cx="-50" cy="0" >
<animatemotion
path = "M50,50
a100,100 0 1,0 200,0
a100,100 0 1,0 -200,0
"
xlink:href="#1"
dur="18s"
repeatCount="indefinite"
begin="0s"
/>
</circle>
<text id="t1" x="-50" text-anchor="middle" fill="#555" font-size="8px" font-family="Arial" dy=".3em">Balloon
<animatemotion
path = "M50,50
a100,100 0 1,0 200,0
a100,100 0 1,0 -200,0
"
dur="18s"
repeatCount="indefinite"
>
</animatemotion>
</text>
</g>
</svg>
如何使其像 html 中包含的 svg 一样工作,如下所示?
<html>
<img src="test.svg" alt="" />
</html>
通过SVG消毒器运行它会产生这样的结果:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920" height="1080" viewBox="0 0 800 300">
<circle id="internalcircle" r="100" cx="100" cy="50" stroke="#999" fill="none" stroke-dasharray="4"></circle>
<circle id="internalcircle" r="60" cx="100" cy="50" stroke="#999" fill="none" stroke-dasharray="4"></circle>
<g>
<circle id="1" r="16" fill="white" stroke="#999" cx="-50" cy="0">
<animatemotion path="M50,50 a100,100 0 1,0 200,0 a100,100 0 1,0 -200,0 " xlink:href="#1" dur="18s" repeatCount="indefinite" begin="0s"></animatemotion>
</circle>
<text id="t1" x="-50" text-anchor="middle" fill="#555" font-size="8px" font-family="Arial" dy=".3em">Balloon
<animatemotion path="M50,50 a100,100 0 1,0 200,0 a100,100 0 1,0 -200,0 " dur="18s" repeatCount="indefinite">
</animatemotion>
</text>
</g>
</svg>
据我所知,唯一的区别是XML声明。