CSS 函数 - path()

CSS 函数path() 接受一个 SVG 路径字符串，并用于 CSS 形状和 CSS 运动路径来定义形状的轮廓。

可能的取值

<'fill-rule'> - 此属性确定填充路径内部的规则，选项包括nonzero 或 evenodd。默认值为nonzero。
<string> - 字符串用作数据来定义 SVG 路径的形状。

语法

在offset-path 或d 中使用时

path(<string>)

在clip-path 中使用时

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

CSS path() - 基本示例

在以下示例中，path() 函数用作 offset-path 属性的值，以定义红色正方形应遵循的特定路径。

<html>
<head>
<style>
   #shape {
      width: 100px;
      height: 100px;
      background-color: red;
      offset-path: path("M10 80 Q 77.5 10, 145 80 T 280 80");
      offset-distance: 0%;
      animation: move 5s infinite linear;
   }
   @keyframes move {
      from {
      offset-distance: 10%;
   }
   to {
      offset-distance: 100%;
   }
   }
</style>
</head>
<body>
<div id="shape"></div>
</body>
</html>

CSS path() - 使用 SVG

在以下示例中，path() 函数是一个 CSS 函数，用于在 SVG 元素的d 属性中定义复杂的形状。
d 属性代表路径数据，并确定元素的形状。
通过动画，path() 函数更改d 属性，导致d 元素的形状发生变化并产生视觉效果。

<html>
<head>
<style>
   svg {
      width: 300px;
      height: 200px;
      background-color: lightgray;
   }
   path {
      fill: blue;
      animation: modifyPath 2s infinite alternate;
   }
   @keyframes modifyPath {
      0% {
            d: path("M50 50 L150 50 L100 150 Z");
      }
      100% {
            d: path("M50 50 L150 50 L100 100 Z");
      }
   }
</style>
</head>
<body>
   <svg>
   <path></path>
   </svg>
</body>
</html>

打印页面