點
points 屬性定義了一組點。每個點由一對數字定義,代表使用者座標系中的 X 和 Y 座標。如果屬性包含奇數個座標,最後一個將被忽略。
你可以將此屬性與以下 SVG 元素一起使用
示例
html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
<!-- polyline is an open shape -->
<polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
<!-- polygon is a closed shape -->
<polygon
stroke="black"
fill="none"
transform="translate(100,0)"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
It is usually considered best practices to separate a X and Y
coordinate with a comma and a group of coordinates by a space.
It makes things more readable for human beings.
-->
</svg>
polyline
對於 <polyline>,points 定義了一個點列表,每個點代表要繪製線條的頂點。每個點都由使用者座標系中的 X 和 Y 座標定義。
注意: 折線是一種開放形狀,意味著最後一個點不與第一個點連線。
| 值 | [ <number>+ ]# |
|---|---|
| 預設值 | none |
| 可動畫的 | 是 |
html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
<!-- polyline is an open shape -->
<polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>
polygon
對於 <polygon>,points 定義了一個點列表,每個點代表要繪製形狀的頂點。每個點都由使用者座標系中的 X 和 Y 座標定義。
注意: 多邊形是一種閉合形狀,意味著最後一個點與第一個點連線。
| 值 | [ <number>+ ]# |
|---|---|
| 預設值 | none |
| 可動畫的 | 是 |
html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
<!-- polygon is an closed shape -->
<polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # PolygonElementPointsAttribute |
| Scalable Vector Graphics (SVG) 2 # PolylineElementPointsAttribute |