path()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

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

尝试一下

clip-path: path(
  "M  20  240 \
 L  20  80 L 160  80 \
 L 160  20 L 280 100 \
 L 160 180 L 160 120 \
 L  60 120 L  60 240 Z"
);

clip-path: path(
  "M 20 240 \
 C 20 0 300 0 300 240 Z"
);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #fe9;
}

#example-element {
  background: linear-gradient(to bottom right, #f52, #05f);
  width: 100%;
  height: 100%;
}

语法

当用于 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