Question

我做了一个简单的loading icon，其中六个矩形连续变暗，我的形象是：

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

当我最初创建文档时，此结构有效。现在它没有。谁知道为什么？

Answer 1

The <animateColor> elements was deprecated in 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>

为什么我的SMIL动画停止工作？

1 个答案: