SVG：使用線條創建簡單和復雜的形狀

線條是 svg 中的基本形狀。 它可用於創建簡單的形狀，例如直線、三角形或更複雜的形狀。 一條線也可以用作路徑。 路徑是一系列連接的線。

因為它們比標準形狀更強大、更靈活，所以它們可以用來創造任何東西。 路徑元素包含可用於定義路徑的各種命令和坐標。 路徑定義 (d) 允許您移動到新點並使用命令行繪製不同的直線和曲線。 可以使用五行命令之一創建路徑。 這篇文章將使用內聯 SVG 作為代碼。 首先，路徑定義如下：x=50 和 y=50 (M 50 50 50)。 在下一行中，我們使用字母 l (l 0 300) 作為小寫字母。

0 300 的相對坐標是從當前點（50 50）繪製到這些命令。 如以下示例所示，我們將中間的三個 lineto 命令替換為水平和垂直命令。 因為沒有指定坐標，所以不必指定最後一組坐標。 第二種選擇是在每個命令後使用逗號分隔坐標 x 和 y。 空格可用於使每個命令和路徑數據更加可見。 路徑命令比前面章節中的簡單形狀要通用得多。 從第一個示例開始，可以使用 lineto 命令構建路徑。 每個路徑命令都可以有自己的執行行，你可以使用更多的空格。 創建兩條看似斷開的線路就像一個命令一樣簡單。

路徑在 SVG 中使用“路徑”元素定義。 每個基本形狀都是根據它的等效路徑來描述的，這就是它的形狀。 路徑只是路徑本身，而不是元素的路徑。

兩點必須通過元素（例如 line> 元素）連接才能在 SVG 中創建線條。

是否可以在 Svg 中繪製任何路徑？

是的，可以在 SVG 中繪製任何路徑。 SVG 在繪製路徑方面提供了很大的自由度。 您可以使用各種路徑命令來創建您想要的任何類型的形狀。

以下是路徑命令的列表：moveto、lineto、curveto（三次貝塞爾曲線和二次貝塞爾曲線）、arcs 和 closepaths。 複合路徑（即具有多個子路徑的路徑）允許使用環形孔修改對象。 本章介紹 SVG 路徑的語法、行為和 DOM 接口。 路徑數據命令後跟一系列命令，後跟一個字符。 路徑數據有一個簡單的語法，允許它以更少的空間和更少的努力下載文件。 由於存在換行符，可以將路徑數據分成多行以使其更易於閱讀。 使用標記時，它們內部屬性中的換行符將被規範化為空格字符。

路徑數據字符串指定可用作值字符串的形狀。 下面的步驟將幫助您根據路徑數據錯誤處理部分處理字符串中的錯誤。 如果有，則路徑數據段之前必須有 moveto 命令。 從當前子路徑開始的點到子路徑結束的點繪製一條自動直線。 在這種情況下，長度為零的路徑段將是合適的。 使用 closepath 方法時，子路徑的末尾使用當前使用的“stroke-linejoin”值連接到第一段的開頭。 開放子路徑的行為方式與封閉子路徑相同，但路徑段不重疊。

當前不支持 Python 中用於段完成的關閉路徑操作。 從當前點到新點，各種 lineto 命令繪製直​​線。 如果你命令一個相對 l 命令，你可以得到一條線的確切終點 (cpy x)。 在正 x 軸的方向上，正 x 值的相對 h 命令創建一條水平線。 前五個示例提供了三次貝塞爾路徑段的概述。 以下是四個橢圓弧命令。 當使用相對命令繪製圓弧時，cpy x 是圓弧的終點(cpx x, cpy y)。

large-arc-flag 和 sweep-flag 表示繪製了四個弧中的哪一個。 EBNF 處理必須消耗盡可能多的給定產品，以便在角色不再滿足產品要求後停止。 如果 d 屬性的值為 none，則渲染將被禁用。 計算封口形狀和選擇標記時，將忽略線段邊界處的默認方向。 rx 或 ry 為零的弧被視為將連接端點的直線段（lineto）。 該縮放程序可以在該縮放程序的數學公式的附錄部分中找到。 沒有長度的路徑段不是無效的，在以下情況下它們可能會導致渲染問題。

為了允許用戶代理按路徑縮放距離計算，'pathLength' 屬性可用於計算作者的總路徑長度。 'path' 元素對於'moveto' 操作沒有長度。 路徑長度是通過選擇多個“lineto”、“curveto”和“arcto”命令來計算的。

如何在 Svg 中繪製水平線？

要在 svg 中繪製一條水平線，您需要使用 'line' 元素。 'line' 元素需要兩個屬性，'x1' 和 'x2'，它們指定線的起點和終點的 x 坐標。 “y1”和“y2”屬性不是必需的，但如果未指定，則默認為“0”。

在 CodePen 中，無論您在 HTML 編輯器中編寫什麼，出現在基本 HTML5 模板中的元素都是 HTML5 元素。 如果你想添加影響整個文檔的類，這是去的地方。 可以從 Internet 上找到的任何樣式表將 CSS 應用到您的 Pen。 您可以從 Internet 上的任何地方輕鬆更改您的 Pen 上的腳本。 您可以為其指定一個 URL，當您將 JavaScript 放入 Pen 時，我們將按照您指定的順序添加它。 如果腳本包含已鏈接的預處理器的文件擴展名，我們將處理該腳本。

我可以將類添加到 Svg 路徑嗎？

將類屬性添加到 html 元素與將類添加到 HTML 元素相同。 使用 css 時，必須將svg 代碼直接插入到文檔中，但 *img 標籤不會引用它。

Svg 元素和類

下圖包括名為“容器”的SVG 元素中的“矩形”和“圓形”元素。 在“rect”元素上，有兩個“width”和“height”屬性； 在“circle”元素上，有兩個“radius”屬性。 XMLns:xlink xmlns: xlink: http://www.w3.org/1999/xlink/xlink.html width=100% height=100% Circle width: 50% height: 50% radius: 10% fill: red