CSS stroke-dasharray 属性值说明
| 值 | 描述 |
|---|---|
| none | 没有使用短划线。 |
| <dasharray> | 使用潇洒模式。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
stroke-dasharray: none | <dasharray> | initial | inherit;
stroke-dasharray 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Stroke-dasharray 属性示例</h2>
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="6,6" d="M5 20 l215 0" />
<path stroke-dasharray="8,10" d="M5 40 l215 0" />
<path stroke-dasharray="18,10,6,7,7,10" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
带有 <line> 元素的 stroke-dasharray 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Stroke-dasharray 属性示例</h2>
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="1" x2="30" y2="1" stroke="#1c98c9" />
<line x1="0" y1="3" x2="30" y2="3" stroke="#8ebf42"
stroke-dasharray="3" />
<line x1="0" y1="5" x2="30" y2="5" stroke="#000"
stroke-dasharray="5 1" />
<line x1="0" y1="7" x2="30" y2="7" stroke="#ccc"
stroke-dasharray="4 2 2" />
<line x1="0" y1="9" x2="30" y2="9" stroke="#666"
stroke-dasharray="4 1 3 2" />
</svg>
</body>
</html>
stroke-dasharray 属性控制用于形成路径笔划形状的虚线和间隙的模式。
stroke-dasharray 属性有两个值：none 和 <dasharray>。
<dasharray> 是逗号和/或者空格分隔的长度或者百分比的列表。
每个值指定沿路径的长度，其中笔划是短划线或者间隙。
展示属性将被覆盖：例如<path stroke-dasharray="4" ... ></path>。
内联样式不会被覆盖：例如<path style="stroke-dasharray: 4;" ... ></path>。
stroke-dasharray 属性可以用作 CSS 属性作为表示属性。
它可以应用于任何元素，但只能对以下元素产生影响：<altGlyph>、<circle>、<ellipse>、<path>、<line>、<polygon>、<polyline>、<rect>、 <text>、<textPath>、<tref> 和 <tspan>。
| 初始值 | none |
|---|---|
| 应用于 | 形状和文本内容元素。 |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | SVG 1.1规格 |
| DOM 语法 | object.strokedasharray =“none”; |
日期：2020-06-02 22:14:46 来源：oir作者：oir