Не работает svg анимация

168

05 апреля 2019, 08:30

в анимации не отрабатывает fill-opacity.

svg { 
  border: 3px solid #eee; 
  display: block; 
  margin: 1em auto; 
  background-color: #7fc4fc; 
} 
 @keyframes trap_stroke { 
    0% { 
    fill-opacity: 0.62; 
    } 
   100% { 
    fill-opacity: 0.22; 
     } 
}   
.circle { 
	animation: trap_stroke 3s; 
  animation-iteration-count: infinite; 
}

<svg width="100" height="100"> 
  <symbol id="point"> 
  <circle id="orange-circle" r="9" cx="50" cy="50" fill="url(#linear-gradient)"/> 
  <linearGradient id="linear-gradient"> 
    <stop offset="0%" stop-color="#D3000E"/> 
    <stop offset="100%" stop-color="#D3CF00"/> 
  </linearGradient> 
  <animate  
           xlink:href="#orange-circle" 
           attributeName="r" 
           from="9" 
           to="16"  
           dur="3s" 
           begin="1s" 
           repeatCount="indefinite" 
           fill="freeze" /> 
    </symbol> 
</svg> 
<svg viewBox="0 0 100 100" width="100" height="100"> 
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#point"</use> 
</svg>

Answer 1

Обе анимации можно оставить в svg

svg { 
  border: 3px solid #eee; 
  display: block; 
  margin: 1em auto; 
  background-color: #7fc4fc; 
}

<svg width="100" height="100"> 
  <symbol id="point"> 
  <circle id="orange-circle" r="9" cx="50" cy="50" fill="url(#linear-gradient)"/> 
  <linearGradient id="linear-gradient"> 
    <stop offset="0%" stop-color="#D3000E"/> 
    <stop offset="100%" stop-color="#D3CF00"/> 
  </linearGradient> 
  <animate  
           xlink:href="#orange-circle" 
           attributeName="fill-opacity" 
           from="0.62" 
           to="0.22"  
           dur="3s" 
           begin="1s" 
           repeatCount="indefinite" 
           fill="freeze" /> 
  <animate  
           xlink:href="#orange-circle" 
           attributeName="r" 
           from="9" 
           to="16"  
           dur="3s" 
           begin="1s" 
           repeatCount="indefinite" 
           fill="freeze" /> 
    </symbol> 
</svg> 
<svg viewBox="0 0 100 100" width="100" height="100"> 
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#point"</use> 
</svg>