为什么这个 SVG 在另存为 html 时有效,而不是 svg?

  • 本文关键字:有效 svg html SVG 另存为 svg
  • 更新时间 :
  • 英文 :


如果我将以下内容另存为测试.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声明。

最新更新