溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何使用SVG 畫線”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何使用SVG 畫線”吧!
SVG <line>元素是一個SVG基本形狀，用來創建一條連接兩個點的線。<line>元素用于在SVG圖像內部繪制線條。可以繪制水平直線，垂直豎線直線、斜角直線等。
polyline元素是SVG的一個基本形狀，用來創建一系列直線連接多個點。典型的一個polyline是用來創建一個開放的形狀，最后一點不與第一點相連。
一、SVG 畫直線
案例
一些簡單的常用SVG <line>畫直線。
示例
<!DOCTYPE html> <html> <body style="background-color: aqua;"> <title>項目</title> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"></line> <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"></line> <line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"></line> <line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"></line> </svg> </body> </html>
運行后直線效果如下 :
代碼解析 ：
直線起始點由x1和y1屬性設置的點處，直線終點由x2和y2屬性設置的點處，該style屬性設置筆劃（線條）的顏色和粗細。
二、SVG 畫曲折線
1. 折線
折線示例代碼如下:
示例
<!DOCTYPE html> <html> <body style="background-color: aqua;"> <title>項目</title> <svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" /> </svg> </body> </html>
運行后效果如下:
2. 繪制三角形
示例代碼如下:
示例
<!DOCTYPE html> <html> <body style="background-color: aqua;"> <title>項目</title> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline points="0,0 30,0 15,30" style="stroke:#006600;" /> </svg> </body> </html>
運行后效果預覽圖:
多條線由點標識。
每個點在points屬性中均以x，y列出。此示例有3個點，它們定義了一個三角形。將3個點用線連接起來，然后填充。默認的填充顏色是黑色。
3. 繪制一個填充綠色的三角形
示例代碼如下:
示例
<!DOCTYPE html> <html> <body style="background-color: aqua;"> <title>項目</title> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline points="10,2 60,2 35,52" style="stroke:#006600; stroke-width: 2; fill: #33cc33;" /> </svg> </body> </html>
運行后效果預覽圖:
已經注意到，三角形中只有兩條線是用描邊顏色（深綠色）繪制的。原因是，僅繪制了列出的點之間的線。沒有畫回第一點的線。為此，points再次將第一個點添加到屬性中。
如下所示:
<!DOCTYPE html> <html> <body style="background-color: aqua;"> <title>項目</title> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline points="10,2 60,2 35,52 10,2" style="stroke:#006600; fill: #33cc33;" /> </svg> </body> </html>
運行的圖像結果如下：
該style屬性設置筆劃（線條）的顏色和粗細以及填充顏色。
三、總結
本文基于Html基礎，使用SVG畫不一樣的線，畫出不一樣圖形。SVG <line>元素畫直線，polyline元素創建一個開放的形狀，最后一點不與第一點相連。實現畫曲線的效果，以及在實際開發項目中需要注意的點，遇到的一些難點， 都提供了一些有效的解決方案。
到此，相信大家對“如何使用SVG 畫線”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
