Question

我想淡入淡出这个（浏览器渲染的）SVG元素（更改不透明度超过1秒）。我正在寻找一个javaScript的例子来淡化它并将其淡出（开始动画）以编程方式。我看到使用<animate>元素的转换示例，但所有示例都集中在通过按钮单击，鼠标事件或仅在页面加载时控制动画。

<svg  x="100" y="100px" opacity="1">
  <rect x="0px" height="60px" width="60px" fill="blue" />
</svg>

Answer 1

要更改Javascript中的属性，请添加＆＃39; id＆＃39;元素：

<svg id="mysvg" x="100" y="100px" opacity="1">
    <rect x="0px" height="60px" width="60px" fill="blue" />
</svg>

你可以设置＆＃39;不透明度＆＃39;属性如：

var elem= document.getElementById("mysvg");
elem.setAttribute( 'opacity', 0.5 );

或者，如果您使用的是jQuery：

$('#mysvg').attr('opacity',0.8);

要随着时间的推移改变这一点，你需要一个计时器，例如

var fadeOut= function(){ 
    var elem=document.getElementById("mysvg"); 
    var opacity= elem.getAttribute('opacity')-0.05;
    if( opacity < 0.05 ){
        opacity=0; 
    }
    elem.setAttribute('opacity',opacity); 
    if( opacity > 0 ) 
        setTimeout( fadeOut, 50 );
};

fadeOut();

如何以编程方式转换SVG

1 个答案: