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.

* Some parts of this feature may have varying levels of support.

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

使用 path() 函数有一些限制。路径必须定义为单个字符串，因此不能使用变量（var() 函数）创建自定义路径。此外，路径中的所有长度都隐式定义为像素（px）单位；不能使用其他单位。与 path() 函数相比，shape() 函数提供了更大的灵活性。

尝试一下

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%;
}

语法

css

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

/* 当仅用于 clip-path 时 */
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")

参数

<fill-rule> 可选

定义路径的哪些部分位于形状内部。可能的值包括：

nonzero：如果从点绘制的射线从左至右穿过的路径段多于从右至左穿过的路径段，从而导致计数不为零，则该点被视为在形状内部。当省略 <fill-rule>时，这是默认值。
evenodd：如果从某点绘制的射线穿过的路径段数目为奇数，则该点被视为在形状内部。这意味着射线每次进入形状内部时，退出的次数并不相等，表明进入的次数为奇数，而退出的次数为偶数。

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

<string>

用于定义 SVG 路径的数据字符串。该 <string> 的内容语法与 SVG 相同。SVG 路径数据字符串包含隐式使用像素单位的路径命令。空路径被视为无效。

返回值

返回一个 <basic-shape> 值。

形式语法

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

<fill-rule> = 
  nonzero  |
  evenodd

示例

使用 `path()` 函数作为 `offset-path` 值

在下面的示例中，path() 函数作为 offset-path 值提供，用于为小球创建一条椭圆形移动路径。

html

<div id="path">
  <div id="ball"></div>
</div>
<button>动起来！</button>

css

#path {
  margin: 40px;
  width: 400px;
  height: 200px;

  /* 画出灰色斜坡 */
  background: radial-gradient(at 50% 0%, transparent 70%, grey 70%, grey 100%);
}

#ball {
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;

  /* 标出椭圆形路径 */
  offset-path: path("M 15 15 A 6 5.5 10 0 0 385 15");
}

const btn = document.querySelector("button");
const ball = document.getElementById("ball");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", true);
  setTimeout(() => btn.removeAttribute("disabled"), 6000);

  ball.animate(
    // 将偏移路径动画化
    { offsetDistance: [0, "100%"] },
    {
      duration: 1500,
      iterations: 4,
      easing: "cubic-bezier(.667,0.01,.333,.99)",
      direction: "alternate",
    },
  );
});

修改 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