SVG keyPoints屬性用法及代碼示例

keyPoints屬性指定動畫的持續時間。使用此屬性的元素包括：<animate>，<animateColor>，<animateMotion>，<animateTransform>和<set>。

用法:

keyPoints = [;<number>]*

屬性值：keyPoints屬性接受上麵提到和下麵描述的值

[; <number>] *：它是一個由semi-colon分隔的介於0和1之間的數字的列表。

注意：keyPoints屬性的默認值為none

以下示例說明了keyPoints屬性的用法。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; margin-left:35px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-50 0 1020 120" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"> 
  
        <path d="M 10 10 H 90 V 90 H 10 L 10 10"
        stroke="green" fill="none" id="geek"/> 
   
        <circle r="3" fill="green"> 
            <animateMotion dur="3s"
                repeatCount="indefinite"
                keyPoints="0;0.5;1"
                keyTimes="0;0.15;1"
                calcMode="linear"> 
                <mpath xlink:href="#geek"/> 
            </animateMotion> 
        </circle> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; margin-left:35px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-30 40 1020 120" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"> 
          
        <path d="M50,50 Q50,100 100,100"
            stroke="green" fill="none" id="geek"/> 
              
            <circle r="5" fill="green"> 
                <animateMotion dur="3s"
                    repeatCount="indefinite"
                    keyPoints="0;0.5;1"
                    keyTimes="0;0.15;1"
                    calcMode="linear"> 
                    <mpath xlink:href="#geek"/> 
                </animateMotion> 
            </circle> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自thacker_shahid大神的英文原創作品 SVG keyPoints Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。