CSS stroke-dashoffset 属性-之路教程

语法

stroke-dashoffset: length | initial | inherit;

stroke-dashoffset 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <h2>Stroke-dashoffset 属性示例</h2>
    <svg viewBox="-3 0 33 10" >
      <line x1="0" y1="1" x2="30" y2="1" stroke="#1c87c9" />
      <line x1="0" y1="3" x2="30" y2="3" stroke="#ccc"
        stroke-dasharray="4 1" />
      <line x1="0" y1="5" x2="30" y2="5" stroke="#8ebf42"
        stroke-dasharray="3 1"
        stroke-dashoffset="3" />
      <line x1="0" y1="7" x2="30" y2="7" stroke="#FF0000"
        stroke-dasharray="3 1"
        stroke-dashoffset="-3" />
      <line x1="0" y1="9" x2="30" y2="9" stroke="#666"
        stroke-dasharray="3 1"
        stroke-dashoffset="1" />
      <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="#000"/>
    </svg>
  </body>
</html>

CSS stroke-dashoffset 属性

stroke-dashoffset 属性是一个表示属性，它定义了沿 SVG 路径的一个笔划的破折号将开始的位置。

展示属性将被覆盖：例如 <path stroke-dashoffset="20%" ... ></path>。
内联样式不会被覆盖：例如 <path style="stroke-dashoffset: 20%;" ... ></path>。

stroke-dashoffset 属性可以用作 CSS 属性作为表示属性。
它可以应用于任何元素，但只能对以下元素产生影响：<altGlyph>、<circle>、<ellipse>、<path>、<line>、<polygon>、<polyline>、<rect>、 <text>、<textPath>、<tref> 和 <tspan>。

不需要“Px”或者“em”单位。

初始值	0
应用于	形状和文本内容元素。
继承	可继承
可动画的	无效
版本	SVG 1.1规格
DOM 语法	object.strokedashoffset =“5”;

CSS stroke-dashoffset 属性值说明

值	描述
length	设置属性的长度。不需要“PX”或者“EM”单位。
percentage	该属性由百分比指定。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:46 来源：oir作者：oir

←CSS stroke-dasharray 属性

CSS stroke-linecap 属性→

语法

stroke-dashoffset 属性示例：

CSS stroke-dashoffset 属性值说明

目录