path()

Baseline 广泛可用 *

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2020 年 7 月以来，它已在各大浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

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

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

试一试

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: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

语法

css

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

/* When used in clip-path only */
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")

参数

<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()` 函数作为 `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");
}

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 Shapes Module Level 1 # funcdef-basic-shape-path

浏览器兼容性

另见

<shape-outside>
CSS 形状模块
CSS 形状概述
SVG path 语法：带插图的指南，来自 CSS-tricks (2021)

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者最后修改于 2025 年 10 月 10 日。

在 GitHub 上查看此页面 • 报告此内容的问题