path()

path() CSS 函数接受 SVG 路径字符串作为参数，用于 CSS 形状和运动路径模块中绘制形状。path() 函数是 <basic-shape> 数据类型的值。它可以用于 CSS 的 offset-path 和 clip-path 属性，以及 SVG 的 d 属性。

尝试一下

语法

当用于 offset-path 或 d 时：

css
path(<string>)

当用于 clip-path 时：

css
path( [<fill-rule>,]? <string> )

参数

<fill-rule> 可选

可选值为 nonzero（默认值，当省略时）或 evenodd，定义填充形状内部的规则。

备注： offset-path 不支持 <fill-rule> 值，使用它会使属性失效。

<string>

用于定义 SVG 路径的数据字符串。该 <string> 的内容语法与 SVG 相同。

返回值

返回一个 <basic-shape> 值。

形式语法

<path()> = 
  path( <'fill-rule'>? , <string> )  

<fill-rule> = 
  nonzero  |
  evenodd

示例

path() 正确值的示例

css
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");

作为 offset-path 值的使用示例

path() 函数用于创建物体运动的路径。修改任何值都会导致路径不能完美地绕着圆形运动。

修改 SVG 路径 d 属性的值

path() 可以用于修改 SVG 的 d 属性的值，该属性也可以在 CSS 中设置为 none。

如果支持将 d 作为 CSS 属性，当你将鼠标悬停在“V”符号上面时，它会垂直翻转。

CSS

css
html,
body,
svg {
  height: 100%;
}

/* 当悬停时显示此路径 */
#svg_css_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}

HTML

html
<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>

结果

规范

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-path

浏览器兼容性

BCD tables only load in the browser

参见