如何以编程方式转换SVG

How to SVG transition programmatically

本文关键字：转换 SVG 方式 编程      更新时间：2023-09-26

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

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

要更改Javascript中的属性，请在元素中添加一个"id"：

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

您可以设置"不透明度"属性，如：

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();
相关文章：