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>
上面代碼的返回結(jié)果如下：
x1和y1屬性用于指定直線的起點(diǎn)，x2和y2屬性用于指定直線的終點(diǎn)?？梢允褂胹tyle屬性來為直線設(shè)置顏色和描邊寬度。
SVG折線
<polyline>元素用于繪制SVG折線。所謂折線就是多條銜接的直線?？聪旅娴睦樱?/FONT>
- <svg xmlns="http://www.w3.org/2000/svg">
- <polyline points="0,0 30,0 15,30"
- style="stroke:#006600;"/>
- </svg>
上面代碼的返回結(jié)果如下：
折線由多個點(diǎn)來定義。每一個點(diǎn)都有x和y屬性。上面的例子中有三個點(diǎn)，它們組成了一個三角形。這3個點(diǎn)被直線連接，并被填充。默認(rèn)的填充顏色是黑色。下面的例子中使用其它顏色來進(jìn)行填充。
- <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>
你會發(fā)現(xiàn)上面的三角形只有兩條邊被填充了描邊色，原因是只有兩點(diǎn)之間的線會被使用描邊色繪制出來。上面的代碼中沒有一個點(diǎn)指向起點(diǎn)。如果需要三條邊都被繪制出來，還需要一個點(diǎn)來指向起點(diǎn)位置。
- <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屬性來為折線設(shè)置顏色和描邊寬度。
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>元素，雖然只有三個點(diǎn)，但是你會發(fā)現(xiàn)三條邊都會被繪制出來。這是因?yàn)樵貢L制各個點(diǎn)之間的所有直線，包括最后一個點(diǎn)指向第一個點(diǎn)的直線。這是元素和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>
本文版權(quán)屬于jQuery之家，轉(zhuǎn)載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201506051978.html
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。