Почему моя анимация SMIL перестала работать?

Я сделал простой значок загрузки с шестью прямоугольниками, которые затемняются последовательно, мое изображение является:

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

Когда я изначально создавал документ, эта структура работала. Теперь это не так. Кто-нибудь знает, почему?


svg animation smil
person dysbulic    schedule 24.01.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Элементы <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>

person AmeliaBR    schedule 24.01.2015