SVG 繪製多邊形

本節我們來學習如何在 SVG 中繪製多邊形,多邊形就是由三條或三條以上的線段首尾順次連接所組成的平面圖形。

如何繪製多邊形

繪製多邊形可以使用 SVG 中的 <polygon> 元素,通過元素中的 points 屬性確定各個點的位置,和 <polyline> 元素差不多。

示例:

例如繪製一個六邊形:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG學習(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg width="500" height="500">
            <polygon points="100,30 140,50 140,90 100,110 60,90 60,50" style="fill:#5cabcf; stroke: #e07cc2; stroke-width:3px;"></polygon>
        </svg>
    </body>
</html>     

在瀏覽器中的演示效果爲:

繪製一個五角星

通過控制 points 屬性的值,我們可以繪製各種圖形,例如下面我們繪製一個五角星。

示例:

五角星看着是挺複雜的,其實我們只需要確定好五角星的五個角的座標點,根據我們平時畫五角星的順序,然後填充顏色和描邊,就能呈現出如下圖所示效果啦:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG學習(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg width="500px" height="500px">
            <polygon points="100,20 40,180 180,80 10,80 150,180" style="fill:#5cabcf; stroke: #e07cc2; stroke-width:3px;" ></polygon>
        </svg>
    </body>
</html>     

在瀏覽器中的演示效果爲:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章