此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
stroke-dashoffset
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年3月.
stroke-dashoffset 是一种表现属性,它定义了虚线与路径起点之间的偏移量。
备注:作为一个表现属性,stroke-dashoffset 可以用作 CSS 属性。
你可以将此属性与以下 SVG 元素一起使用:
示例
html,
body,
svg {
height: 100%;
}
html
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
<!-- 没有设置为虚线 -->
<line x1="0" y1="1" x2="30" y2="1" stroke="black" />
<!-- 没有设置偏移量 -->
<line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />
<!-- 虚线正向偏移了 3 个单位 -->
<line
x1="0"
y1="5"
x2="30"
y2="5"
stroke="black"
stroke-dasharray="3 1"
stroke-dashoffset="3" />
<!-- 虚线反向偏移了 3 个单位 -->
<line
x1="0"
y1="7"
x2="30"
y2="7"
stroke="black"
stroke-dasharray="3 1"
stroke-dashoffset="-3" />
<!-- 虚线正向偏移了 1 个单位,最终渲染结果和上一个例子相同 -->
<line
x1="0"
y1="9"
x2="30"
y2="9"
stroke="black"
stroke-dasharray="3 1"
stroke-dashoffset="1" />
<!-- 底下的红线突显了每行虚线的偏移量 -->
<path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgb(255 0 0 / 50%)" />
</svg>
[フレーム]
使用说明
| 值 | <percentage> | <length> |
|---|---|
| 默认值 | 0 |
| 可动画化 | 是 |
偏移量的计算通常基于 pathLength,但如果使用 <percentage> 值,那么将根据当前视口的百分比进行计算。
规范
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty |
浏览器兼容性
Enable JavaScript to view this browser compatibility table.