SVG points屬性用法及代碼示例

points屬性描述了多邊形或折線元素的點列表。如果包含奇數對坐標，則最後一個將被忽略。

使用此屬性的元素：

<polyline>元素
<polygon>元素

用法:

points = numbers

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

numbers:它是一對用逗號分隔的整數，以及一組用表示用戶坐標係中X和Y坐標的空格分隔的坐標。其默認值被視為無。

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

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color:green;"> 
        <h1> 
            GeeksforGeeks 
        </h1> 
  
        <h4 style="color:black;"> 
            Using Polyline element 
        </h4> 
  
        <svg viewBox="100 0 520 100" 
            xmlns="http://www.w3.org/2000/svg"> 
            <polyline stroke="green" fill="none"
                points="100,100 150,25 150,75 200,0"/> 
        </svg> 
    </div> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color:green;"> 
        <h1> 
            GeeksforGeeks 
        </h1> 
  
        <h4 style="color:black;"> 
            Using Polygon element 
        </h4> 
  
        <svg viewBox="100 0 520 100" 
            xmlns="http://www.w3.org/2000/svg"> 
            <polygon stroke="green" fill="none"
                points="100,100 150,25 150,75 200,0"/> 
        </svg> 
    </div> 
</body> 
  
</html>

輸出：

相關用法

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