我做了一个简单的加载图标,其中有六个连续变暗的矩形,我的图像是:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 60 60">
<g transform="translate(30,30)">
<g transform="rotate(0)">
<rect id="rect1" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animateColor id="a1b" begin="0s;a6b.end" attributeName="fill" values="white;black" fill="freeze" dur=".5s" />
<animateColor id="a1w" begin="1s;a6w.end" attributeName="fill" values="black;white" fill="freeze" dur=".5s" />
</rect>
</g>
<g transform="rotate(60)">
<rect id="rect2" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animateColor id="a2b" begin="a1b.end" attributeName="fill" values="white;black" fill="freeze" dur=".5s" />
<animateColor id="a2w" begin="a1w.end" attributeName="fill" values="black;white" fill="freeze" dur=".5s" />
</rect>
</g>
⋮
<g transform="rotate(300)">
<rect id="rect6" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animateColor id="a6b" begin="a5b.end" attributeName="fill" values="white;black" fill="freeze" dur=".5s" />
<animateColor id="a6w" begin="a5w.end" attributeName="fill" values="black;white" fill="freeze" dur=".5s" />
</rect>
</g>
</g>
</svg>
当我最初创建文档时,这种结构是有效的。现在没有了。有谁知道为什么?