SVG Stroke 属性
SVG Stroke 属性
SVG Stroke 属性用于定义 SVG 图形或图像中的描边颜色、宽度和样式。
描边颜色
描边颜色可以通过 stroke
属性定义,如下所示:
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" stroke="#f00" />
</svg>
这将在一个 200x200 的 SVG 中绘制一个 100x100 的矩形。描边颜色为红色。
描边宽度
描边宽度可以通过 stroke-width
属性定义,如下所示:
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" stroke="#f00" stroke-width="5" />
</svg>
这将在一个 200x200 的 SVG 中绘制一个 100x100 的矩形。描边颜色为红色,描边宽度为 5。
描边样式
描边样式可以通过 stroke-dasharray
属性定义。这个属性是用于绘制虚线或点线的。
例如,以下代码绘制一个点线:
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" stroke="#f00" stroke-dasharray="3, 3" />
</svg>
这将在一个 200x200 的 SVG 中绘制一个 100x100 的矩形。描边颜色为红色,描边样式为点线。
同样,以下代码绘制一个虚线:
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" stroke="#f00" stroke-dasharray="10, 10" />
</svg>
这将在一个 200x200 的 SVG 中绘制一个 100x100 的矩形。描边颜色为红色,描边样式为虚线。
还有一种常见的描边样式是实线,它是默认的描边样式。
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" stroke="#f00" />
</svg>
这将在一个 200x200 的 SVG 中绘制一个 100x100 的矩形。描边颜色为红色,描边样式为实线。
线段末端形状
stroke-linecap
属性用于控制(非封闭)线条的末端形状,取值包括:
butt
:默认值,线条末端直接截止;round
:线条末端变为圆形;square
:线条末端变为正方形。
以下是一个例子:
<svg width="200" height="200">
<line x1="100" y1="50" x2="100" y2="150" stroke="#f00" stroke-width="10" stroke-linecap="round" />
</svg>
这将在一个 200x200 的 SVG 中绘制一个从 (100, 50) 到 (100, 150) 的垂直线条。描边颜色为红色,描边宽度为 10,而线条末端则变成了圆形。
线段拐角形状
stroke-linejoin
属性用于控制线条拐角处的形状。取值包括:
miter
:默认值,两个线条的拐角处形成一个锐角;round
:拐角处被形成一个圆弧;bevel
:拐角处被形成一个斜线。
以下是一个例子:
<svg width="200" height="200">
<path d="M50 50 L150 50 L150 150 L75 100 L50 100 Z" stroke="#f00" stroke-width="10" fill="none" stroke-linejoin="bevel" />
</svg>
这将在一个 200x200 的 SVG 中绘制一个平行四边形。描边颜色为红色,描边宽度为 10,线条拐角处则变成了斜行。
小结
以上就是 SVG Stroke 属性的一些使用方法和常见值。使用这些属性,我们可以轻松地控制 SVG 图形的描边颜色、宽度、样式、线段末端形状和线段拐角形状。