当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。