SVG 动画变量值的不透明度

Question

我正在尝试设置一个 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" width="40" height="40">
<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>

非常感谢任何提示或建议。客气点，我是新手:)

Answer 1

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

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');

        }

SVG 动画变量值的不透明度

SVG Animate Opacity on Variable Value

javascript

svg

opacity

jquery-animate