SVG直線
SVG <line>元素用于繪制一條。下面是一個繪制直線的例子。
- <svg xmlns="http://www.w3.org/2000/svg">
- <line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"/>
- <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
- <line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"/>
- <line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"/>
- </svg>
上面代碼的返回結果如下：
x1和y1屬性用于指定直線的起點，x2和y2屬性用于指定直線的終點。可以使用style屬性來為直線設置顏色和描邊寬度。
SVG折線
<polyline>元素用于繪制SVG折線。所謂折線就是多條銜接的直線。看下面的例子：
- <svg xmlns="http://www.w3.org/2000/svg">
- <polyline points="0,0 30,0 15,30"
- style="stroke:#006600;"/>
- </svg>
上面代碼的返回結果如下：
折線由多個點來定義。每一個點都有x和y屬性。上面的例子中有三個點，它們組成了一個三角形。這3個點被直線連接，并被填充。默認的填充顏色是黑色。下面的例子中使用其它顏色來進行填充。
- <svg xmlns="http://www.w3.org/2000/svg">
- <polyline points="10,2 60,2 35,52"
- style="stroke:#006600; stroke-width: 2;
- fill: #33cc33;"/>
- </svg>
你會發現上面的三角形只有兩條邊被填充了描邊色，原因是只有兩點之間的線會被使用描邊色繪制出來。上面的代碼中沒有一個點指向起點。如果需要三條邊都被繪制出來，還需要一個點來指向起點位置。
- <svg xmlns="http://www.w3.org/2000/svg">
- <polyline points="10,2 60,2 35,52 10,2"
- style="stroke:#006600; fill: #33cc33;"/>
- </svg>
和SVG直線一樣，可以使用style屬性來為折線設置顏色和描邊寬度。
SVG多邊形
<polygon>元素用于繪制SVG多邊形。多邊形是指三條或三條邊以上的幾何圖形。看下面的SVG三角形的例子：
- <svg xmlns="http://www.w3.org/2000/svg">
- <polygon points="10,0 60,0 35,50"
- style="stroke:#660000; fill:#cc3333;"/>
- </svg>
使用<polygon>元素，雖然只有三個點，但是你會發現三條邊都會被繪制出來。這是因為元素會繪制各個點之間的所有直線，包括最后一個點指向第一個點的直線。這是元素和code>元素的唯一不同之處。
我們可以繪制更多條邊的幾何圖形，下面是一個八邊形的例子：
- <svg xmlns="http://www.w3.org/2000/svg">
- <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>
本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201506051978.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。