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>

列印頁面