path()

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

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

试一试

语法

在 offset-path 或 d 中使用

css
path(<string>)

在 clip-path 中使用

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

参数

<fill-rule> 可选

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

  • nonzero：如果从该点绘制的一条射线与更多从左到右的路径段而不是从右到左的路径段相交，则该点被认为在形状内部，从而产生非零计数。当省略 <fill-rule> 时，这是默认值。
  • evenodd：如果从该点绘制的一条射线与奇数个路径段相交，则该点被认为在形状内部。这意味着每次射线进入形状时，它都没有退出相同次数，这表示奇数个进入次数没有相应的退出次数。

警告：<fill-rule> 在 offset-path 中不受支持，使用它会使该属性无效。

<string>

一个包含在引号中的 数据字符串，它定义了一个 SVG 路径。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");

将 path() 函数用作 offset-path 值

在以下示例中，已提供 path() 函数作为 offset-path 值，以创建球体沿其移动的椭圆路径。

html
<div id="path">
  <div id="ball"></div>
</div>
<button>animate</button>
css
#path {
  margin: 40px;
  width: 400px;
  height: 200px;

  /* draw the gray ramp */
  background: radial-gradient(at 50% 0%, transparent 70%, grey 70%, grey 100%);
}

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

  /* mark the elliptical path */
  offset-path: path("M 15 15 A 6 5.5 10 0 0 385 15");
}
js
const btn = document.querySelector("button");
const ball = document.getElementById("ball");

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

  ball.animate(
    // animate the offset path
    { 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%;
}

/* This path is displayed on hover*/
#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>

结果

规范

规范
CSS 形状模块级别 1
# funcdef-basic-shape-path

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅