stroke-dasharray
stroke-dasharray
该stroke-dasharray属性控制用于描边路径的破折号和间隙的模式。
作为一个表现属性，它也可以直接在CSS样式表中作为属性使用
用法说明
| 分类 | 呈现属性 |
|---|---|
| 值 | none | <dasharray> | 继承 |
| 动画 | 是 |
| 规范性文件 | SVG 1.1（第二版） |
<dasharray>这是一个用逗号和/或空格分隔的<length> s和<percentage> s列表，用于指定交替的破折号和间隔的长度。如果提供了奇数个值，则重复该值列表以产生偶数个值。因此，5,3,2相当于5,3,2,5,3,2。
例子
<?xml version="1.0"?>
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
<line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" />
<line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" />
<line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" />
<line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" />
<line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" />
<line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" />
<line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" />
<line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
<line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" />
<style><![CDATA[
line{
stroke: black;
stroke-width: 2;
}
]]></style>
</svg>
Live sample
元素
以下元素可以使用该stroke-dasharray属性
- Shape elements »
- Text content elements »
