CSS 函数 - path()



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

可能的取值

  • <'fill-rule'> - 此属性确定填充路径内部的规则,选项包括nonzeroevenodd。默认值为nonzero

  • <string> - 字符串用作数据来定义 SVG 路径的形状。

语法

offset-pathd 中使用时

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>
广告