polygon元素定義了一個由一組首尾相連的直線線段構(gòu)成的閉合多邊形形狀，最后一點連接到第一點。 <polygon>元素通常用于繪制具有多個（3個或更多）側(cè)面/邊緣的形狀。
這是一個簡單的SVG多邊形示例:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polygon points="10,0 60,0 35,50" style="stroke:#660000; fill:#cc3333;"/> </svg>測試看看 ?/?
運行后效果如下:
您可能已經(jīng)注意到，即使僅列出了3個點，也都繪制了所有3個面。這是因為 <polygon>元素在所有點之間繪制線，包括從最后一個點到第一個點的一條線。該<polyline>不會從最后一點到第一畫線。這似乎是<polygon>和 <polyline>元素的唯一區(qū)別。
示例代碼如下:
<svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/> </svg>測試看看 ?/?
運行效果如下
這是一個更大的示例-8個邊的多邊形(八邊形):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25, 30" style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/> </svg>測試看看 ?/?
示例代碼如下:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/> </svg>測試看看 ?/?
運行后效果如下: