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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。