0

我做了一个简单的加载图标，其中有六个连续变暗的矩形，我的图像是：

<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>

当我最初创建文档时，这种结构是有效的。现在没有了。有谁知道为什么？

4

1 回答 1

2

这些<animateColor>元素在 SVG 1.1 中被弃用，并且在 SVG 2 中被完全删除。一些浏览器已经将其删除。

要达到相同的效果，只需使用<animate>所有相同的属性即可。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 60 60" style="width:100vmin">
  <defs>
    <title>Loading Icon</title>
    <style type="text/css">
      rect {
        stroke: black;
        stroke-width: .75;
        fill: transparent;
      }
    </style>
    <rect id="bar" x="-3" y="9" rx="3" ry="3" width="6" height="20"/>
  </defs>
  <g transform="translate(30,30)">
    <g transform="rotate(0)">
      <rect id="rect1" x="-3" y="9" rx="3" ry="3" width="6" height="20">
        <animate id="a1b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="0s;a6b.end" />
        <animate id="a1w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="1s;a6w.end" />
      </rect>
    </g>
    <g transform="rotate(60)">
      <rect id="rect2" x="-3" y="9" rx="3" ry="3" width="6" height="20">
        <animate id="a2b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a1b.end" />
        <animate id="a2w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a1w.end" />
      </rect>
    </g>
    <g transform="rotate(120)">
      <rect id="rect3" x="-3" y="9" rx="3" ry="3" width="6" height="20">
        <animate id="a3b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a2b.end" />
        <animate id="a3w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a2w.end" />
      </rect>
    </g>
    <g transform="rotate(180)">
      <rect id="rect4" x="-3" y="9" rx="3" ry="3" width="6" height="20">
        <animate id="a4b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a3b.end" />
        <animate id="a4w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a3w.end" />
      </rect>
    </g>
    <g transform="rotate(240)">
      <rect id="rect5" x="-3" y="9" rx="3" ry="3" width="6" height="20">
        <animate id="a5b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a4b.end" />
        <animate id="a5w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a4w.end" />
      </rect>
    </g>
    <g transform="rotate(300)">
      <rect id="rect6" x="-3" y="9" rx="3" ry="3" width="6" height="20">
        <animate id="a6b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a5b.end" />
        <animate id="a6w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a5w.end" />
      </rect>
    </g>
  </g>
</svg>

于 2015-01-24T03:03:54.663 回答