SVG <set>用法及代码示例

SVG代表可缩放矢量图形。它可以像HTML画布一样用于制作图形和动画。

SVG <set>元素提供了一种简单的方法，可以仅在指定的持续时间内设置属性的值。它支持所有属性类型，包括无法合理插值的属性类型，例如字符串和布尔值。

用法:

<set attributeName="" value="" />

属性：

to:此属性定义在动画持续时间内要应用于目标属性的值。
Animation Attributes:用于提供动画效果的属性，exp定时属性，事件属性和值属性等。
Global Attributes:一些常用的全局属性，例如核心属性和样式属性等。

范例1：

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 40 40" 
         xmlns="http://www.w3.org/2000/svg"> 
        <rect id="me" width="10" height="10"> 
            <set attributeName="fill" to="green" /> 
          </rect> 
    </svg> 
</body> 
  
</html>

输出：

范例2：

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg width="400" height="200"
        xmlns="http://www.w3.org/2000/svg"> 
        <a> 
            <text x="50" y="90" text-anchor="middle"> 
                Click Here 
            </text> 
            <set attributeName="href" 
                 to="https://youtu.be/Abwl8g65BLQ" /> 
        </a> 
    </svg> 
</body> 
  
</html>

输出：

支持的浏览器：

Chrome
Edge
Firefox
Safari
IE浏览器
Opera

相关用法

注：本文由纯净天空筛选整理自taran910大神的英文原创作品 SVG <set> Element。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。