在 SVG(可縮放向量圖形)中, <stroke>屬性用於定義形狀的輪廓。它通常與<path><rect><circle>和其他 SVG 元素結合使用,以指定筆劃的顏色、寬度和樣式。以下是在 SVG 中使用描邊屬性的一些方法:

  1. 基本描邊:描邊屬性最基本的用途是定義描邊的顏色。您可以使用stroke屬性來設定顏色。例如:

    XML
    <circle cx="50" cy="50" r="40" stroke="black" />

    在此範例中,第<circle>元素將具有黑色筆劃。

  2. 描邊寬度:可以使用stroke-width屬性來設定描邊的寬度。例如:

    XML
    <rect x="10" y="10" width="80" height="80" stroke="blue" stroke-width="3" />

    此矩形將具有寬度為 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% 的紅色描邊。

  4. 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。

  5. Stroke Linecap: stroke-linecap屬性定義用於繪製筆畫端點的形狀。它可以採用buttroundsquare等值。例如:

    XML
    <line x1="20" y1="20" x2="80" y2="80" stroke="purple" stroke-width="5" stroke-linecap="round" />

    這條線將有一個帶有圓形線帽的紫色筆劃。

這些只是如何在 SVG 中使用描邊屬性的幾個範例。試驗這些屬性和值,以實現 SVG 圖形中筆畫所需的視覺效果。