在 SVG(可縮放向量圖形)中, <stroke>
屬性用於定義形狀的輪廓。它通常與<path>
、 <rect>
、 <circle>
和其他 SVG 元素結合使用,以指定筆劃的顏色、寬度和樣式。以下是在 SVG 中使用描邊屬性的一些方法:
基本描邊:描邊屬性最基本的用途是定義描邊的顏色。您可以使用stroke
屬性來設定顏色。例如:
XML <circle cx="50" cy="50" r="40" stroke="black" />
在此範例中,第<circle>
元素將具有黑色筆劃。
描邊寬度:可以使用stroke-width
屬性來設定描邊的寬度。例如:
XML <rect x="10" y="10" width="80" height="80" stroke="blue" stroke-width="3" />
此矩形將具有寬度為 3 個單位的藍色描邊。
描邊不透明度:您可以使用stroke-opacity
屬性控制描邊的不透明度。它的值介於 0(完全透明)和 1(完全不透明)之間。例如:
XML <line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="2" stroke-opacity="0.7" />
該線將具有不透明度為 70% 的紅色描邊。
Stroke Dasharray: stroke-dasharray
屬性可讓您建立虛線或點線筆畫。您可以指定一系列值來控制虛線和間隙的長度。例如:
XML <line x1="10" y1="50" x2="90" y2="50" stroke="green" stroke-width="2" stroke-dasharray="5,3" />
該線將具有綠色虛線筆畫,其中破折號長度為 5,間隙長度為 3。
Stroke Linecap: stroke-linecap
屬性定義用於繪製筆畫端點的形狀。它可以採用butt
、 round
或square
等值。例如:
XML <line x1="20" y1="20" x2="80" y2="80" stroke="purple" stroke-width="5" stroke-linecap="round" />
這條線將有一個帶有圓形線帽的紫色筆劃。
這些只是如何在 SVG 中使用描邊屬性的幾個範例。試驗這些屬性和值,以實現 SVG 圖形中筆畫所需的視覺效果。