css中stroke相关的属性

阅读数:34 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

在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

定义描边端点的形状,可选值有 buttroundsquare

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

4、stroke-linejoin

定义描边的角连接处的形状,可选值有 miterroundbevel

.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元素都支持这些属性。




相关推荐

1、安装依赖 npm install svg-sprite-loader --save-dev 2、配置build文件夹中的webpack.base.conf.js 3、在src/component

svg 是Scalable Vector Graphics意为可缩放矢量图形,SVG使用XML格式定义二维图形和绘图程序的语言。 一、使用方式 1、SVG文件可以

$ \begin{equation} \left [ \begin{array}{cccc} a_{11}&amp; a_{12} &amp;\cdots &amp; a_{1n}\\ a_{2

一、概述 响应式图片可以根据不同的设备屏幕大小从而选择加载不同的图片,从而节省带宽。实现响应式图片有三种方法:srcset+sizes属性、picture标签、svg 二、srcset+sizes 1

一、概述 SVG DOM接口指的是一系列允许JavaScript与SVG文档交互的编程接口。这些接口定义在Web标准中,特别是在SVG规范中,它们扩展了标准的DOM接口,使得可以通过JavaScrip

一、概述 CSS 的 mask 属性及其相关属性允许你使用图像、渐变或 SVG 图像来遮罩元素的部分内容。 二、mask 属性 mask 属性是一个简写属性,用于同时设置多个遮罩相关的属性。它可以接受