阅读数:9 评论数:0

一、概述

在CSS中，stroke 相关的属性用于定义SVG元素的描边样式。

二、主要的属性及用法

以下是一些主要的 stroke 相关属性及其用法:

1、stroke

这个属性用于设置描边的颜色。你可以使用颜色名称、十六进制颜色代码、RGB、RGBA、HSL 或 HSLA 值。

.my-element {
    stroke: blue; /* 颜色名称 */
    stroke: #00F; /* 十六进制颜色 */
    stroke: rgb(0, 0, 255); /* RGB颜色 */
    stroke: rgba(0, 0, 255, 0.5); /* 带有透明度的RGB颜色 */
}

2、stroke-width

用于设置描边的宽度，单位可以是像素、em、百分比等。

.my-element {
    stroke-width: 2px; /* 描边宽度为2像素 */
}

3、stroke-linecap

定义描边端点的形状，可选值有 butt、round 和 square。

.my-element {
    stroke-linecap: round; /* 端点为圆形 */
}

4、stroke-linejoin

定义描边的角连接处的形状，可选值有 miter、round 和 bevel。

.my-element {
    stroke-linejoin: bevel; /* 角连接处为斜角 */
}

5、stroke-dasharray

通过指定一系列点划长度来创建虚线描边。长度和间隔按照数组中的值交替应用。

.my-element {
    stroke-dasharray: 5, 10; /* 5像素实线，10像素空白 */
}

6、stroke-dashoffset

设置虚线描边的起始偏移量。

.my-element {
    stroke-dashoffset: 5px; /* 从5像素处开始虚线 */
}

7、stroke-opacity

设置描边的透明度，取值范围从0（完全透明）到1（完全不透明）。

.my-element {
    stroke-opacity: 0.5; /* 50%的透明度 */
}

8、stroke-miterlimit

当 stroke-linejoin 设置为 miter 时，这个属性定义斜接长度的最大值。当斜接长度超过这个值时，角会被削去。

.my-element {
    stroke-miterlimit: 10; /* 斜接长度限制 */
}

这些属性通常应用于SVG的 <path>、<circle>、<rect>、<line>、<polyline> 和 <polygon> 等图形元素。在使用这些属性时，请确保你的元素支持描边属性，因为并非所有的SVG元素都支持这些属性。