在 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 图形中笔画所需的视觉效果。