SVG 描边属性
SVG 描边属性
stroke 属性设置绘制在元素周围的线条颜色。
我们将介绍六个 stroke 属性
-
stroke- 设置元素周围线条的颜色 -
stroke-width- 设置元素周围线条的宽度 -
stroke-opacity- 设置元素周围线条的透明度 -
stroke-linecap- 设置线条或开放路径末端的形状 -
stroke-dasharray- 设置线条显示为虚线 -
stroke-linejoin- 设置两条线相交处的角的形状
SVG 描边属性
stroke 属性定义元素的轮廓颜色。
stroke 属性可用于以下 SVG 元素：<circle>、<ellipse>、<line>、<path>、<polygon>、<polyline>、<rect>、<text>、<textPath>、<tref> 和 <tspan>。
stroke 属性的值可以是颜色名称、rgb 值或十六进制值。
在这里，我们使用 stroke 属性来设置多边形、矩形、圆形和文本的轮廓颜色。
这是 SVG 代码
示例
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 0,190 100,190" fill="lime" stroke="red" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" />
<text x="420" y="100" fill="red" stroke="blue">I love SVG!</text>
</svg>
自己动手试一试 »
在这里，我们使用 stroke 属性来定义三条线的颜色
这是 SVG 代码
示例
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="green" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
自己动手试一试 »
SVG stroke-width 属性
stroke-width 属性定义描边的宽度。
stroke-width 属性可用于以下 SVG 元素：<circle>、<ellipse>、<line>、<path>、<polygon>、<polyline>、<rect>、<text>、<textPath>、<tref> 和 <tspan>。
在这里，我们使用 stroke-width 属性来设置多边形、矩形、圆形和文本的轮廓宽度。
这是 SVG 代码
示例
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" />
<text x="420" y="100" fill="red" stroke="blue" stroke-width="4">I love SVG!</text>
</svg>
自己动手试一试 »
在这里，我们使用 stroke-width 属性来设置三条线的宽度
这是 SVG 代码
示例
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
自己动手试一试 »
SVG stroke-opacity 属性
stroke-opacity 属性定义描边的透明度。
stroke-opacity 属性可用于以下 SVG 元素：<circle>、<ellipse>、<line>、<path>、<polygon>、<polyline>、<rect>、<text>、<textPath>、<tref> 和 <tspan>。
stroke-opacity 属性的值范围是从 0 到 1（或 0% 到 100%）。
在这里，我们使用 stroke-opacity 属性来设置多边形、矩形、圆形和文本的轮廓透明度。
这是 SVG 代码
示例
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" stroke-opacity="0.4" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" stroke-opacity="0.4" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" stroke-opacity="0.4" />
<text x="420" y="100" fill="red" stroke="blue" stroke-width="4" stroke-opacity="0.4">I love SVG!</text>
</svg>
自己动手试一试 »
在这里，我们使用 stroke-opacity 属性来设置三条线的透明度。
这是 SVG 代码
示例
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red">
<path stroke-width="2" stroke-opacity="0.4" d="M5 20 l215 0" />
<path stroke-width="4" stroke-opacity="0.4" d="M5 40 l215 0" />
<path stroke-width="6" stroke-opacity="0.4" d="M5 60 l215 0" />
</g>
</svg>
自己动手试一试 »
SVG stroke-linecap 属性
stroke-linecap 属性定义线条或开放路径的末端类型。
stroke-linecap 属性可用于以下 SVG 元素：<path>、<polyline>、<line>、<text>、<textPath>、<tref> 和 <tspan>。
stroke-linecap 属性的值可以是 "butt"（平头）、"round"（圆头）或 "square"（方头）。
在这里，我们使用 stroke-linecap 属性来为三条线设置不同的末端形状。
这是 SVG 代码
示例
<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red" stroke-width="16">
<path stroke-linecap="butt" d="M10 20 l215 0" />
<path stroke-linecap="round" d="M10 50 l215 0" />
<path stroke-linecap="square" d="M10 80 l215 0" />
</g>
</svg>
自己动手试一试 »
SVG stroke-dasharray 属性
stroke-dasharray 属性用于创建虚线。
stroke-dasharray 属性可用于以下 SVG 元素：<circle>、<ellipse>、<line>、<path>、<polygon>、<polyline>、<rect>、<text>、<textPath>、<tref> 和 <tspan>。
stroke-dasharray 属性的值可以是 "none"，或者是一系列由逗号或空格分隔的长度/百分比，用于定义破折号和间隙的长度。
在这里，我们使用 stroke-dasharray 属性创建不同的虚线。
这是 SVG 代码
示例
<svg height="100" width="400" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red" stroke-width="6">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="35,10" d="M5 60 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 80 l215 0" />
</g>
</svg>
自己动手试一试 »
在这里，我们使用 stroke-dasharray 属性为多边形、矩形和圆形创建不同的虚线轮廓。
这是 SVG 代码
示例
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" stroke-dasharray="10,5" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" stroke-dasharray="10,5" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" stroke-dasharray="10,5" />
</svg>
自己动手试一试 »
SVG stroke-linejoin 属性
stroke-linejoin 属性定义两条线相交处的角的形状。
stroke-linejoin 属性可用于以下 SVG 元素：<path>、<polygon>、<polyline>、<rect>、<text>、<textPath>、<tref> 和 <tspan>。
stroke-linejoin 属性的值可以是 "arcs"（圆弧）、"bevel"（斜角）、"miter"（斜接）、"miter-clip"（斜接裁剪）或 "round"（圆角）。
在这里，我们使用 stroke-linejoin 属性来创建不同的角形状。
这是 SVG 代码
示例
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="round" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="round" />
</svg>
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="miter" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="miter" />
</svg>
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
</svg>
自己动手试一试 »
