SVG 动画不透明度变量值

Posted 2023-05-08

【中文标题】SVG 动画不透明度变量值

【英文标题】：SVG Animate Opacity on Variable Value

【发布时间】：2019-08-07 15:26:39

【问题描述】：

我正在尝试使 svg 元素在二进制变量设置为零时消失（缓慢而优雅地），然后在二进制变量恢复为一时重新出现（再次，良好且缓慢）。我的图像消失了，但似乎无法弄清楚如何让它重新出现。这是 javascript：

function go() 

    var max = 2;
    var random = Math.floor(Math.random() * Math.floor(max));;
    console.log("hi" + random);

    var elements = document.getElementsByTagName("animate");
    for (var i = 0; i < elements.length; i++) 
        if (random == 1) 
            elements[i].beginElement();
        
        else 
            elements[i].endElement();

        

    

这里是 SVG 元素

  <svg xmlns="http://www.w3.org/2000/svg" class="icons"  >
<g class="icon" transform="translate(-2 -2)">
  <path class="icon__sight" d="M38.255 20.182A16.353 16.353 0 0 0 23.818 5.745V2h-3.636v3.745A16.353 16.353 0 0 0 5.745 20.182H2v3.636h3.745a16.353 16.353 0 0 0 14.437 14.437V42h3.636v-3.745a16.353 16.353 0 0 0 14.437-14.437H42v-3.636h-3.745zM22 34.727A12.727 12.727 0 1 1 34.727 22 12.718 12.718 0 0 1 22 34.727z" fill="#fff"/>
  <circle class="icon__indicator" cx="8" cy="8" r="8" transform="translate(14 14)" fill="#88db29">
    <animate dur="1" attributeName="opacity" from="1" to="0" begin="move.end" repeatCount="0" fill="freeze" />
  </circle>/>
</g>

非常感谢任何提示或建议。善良，我是新手 :)

【参考方案1】：

这对于简单地转换 SVG 的不透明度似乎过于复杂。为什么不利用 CSS 来通过 JS 操作类来转换状态？

svg 
  transition: opacity 0.5s ease;


svg.hidden 
  opacity: 0;

var svg = document.querySelector('svg');
...
        if (random == 1) 
            svg.classList.remove('hidden');
        
        else 
            svg.classList.add('hidden');