CSS - offset-path 屬性

offset-path CSS 屬性指定元素在其父容器或 SVG 座標系內的路徑。

該路徑可能是一條線、曲線或其他形狀，它決定了元素沿著該路徑的位置或移動。
offset-path 屬性用於控制元素沿給定路徑的位置和方向，以及 offset-distance、offset-rotate 和 offset-anchor。

offset-path 屬性定義了一個動畫元素可以跟隨的路徑，可以是具有子路徑的指定路徑或基本形狀。

它確定元素的確切位置，包括初始位置和方向。以前稱為 motion-path，現在它描述靜態位置。

可能的值

offset-path 屬性可以接受諸如 offset-path、<coord-box> 或兩者兼而有之的值；它還可以接受關鍵字 none。一個 <url>、一個 <basic-shape> 或一個 ray() 函式可能是 offset-path 的值。

none - none 值表示沒有 offset-path 的元素，它基於其預設位置屬性（如 top 和 left），而不是 offset-path。
<offset-path> - 可以使用 ray() 函式、<url> 值或 <basic-shape> 值來指定 offset-path 屬性。

ray() - ray() 函式建立一個具有固定起始位置、長度和角度的線。
url() - SVG 形狀元素可以透過其 ID 在 url() 函式中被 offset-path 屬性引用。
<basic-shape> - 使用 CSS 基本形狀函式，如 circle()、ellipse()、inset()、path()、polygon()、rect() 或 xywh() 來設定 offset-path 屬性。

<coord-box> - offset-path 屬性包含一個名為 <coord-box> 的可選引數。<coord-box> 定義的 offset path 由參考框大小決定，通常是 SVG 中的 view-box 或 CSS 中的 border-box。

應用於

可變換元素

語法

offset-path = none | <offset-path> || <coord-box>

CSS offset-path - 使用 url()

以下示例演示瞭如何使用 url() 建立 offset-path。

      
<html>
<head>
<style>
   body {
      background: #edbb5f;
      padding: 90px;
      display: flex;
      justify-content: center;
   }
   .track {
      stroke: #f0e9e9;
      fill: none;
      stroke-width: 0.15;
   }
   .marker {
      motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
      offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
      animation: move 3s linear infinite;
      fill: #f23c35;
   }
   @keyframes move {
      100% { 
         motion-offset: 80%;
         offset-distance: 80%;
      }
   }
</style>
</head>
<body>
   <svg viewBox="0,0 10,10" width="300px" height="300px">  
      <path class="track" d="M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"/>
      <circle class="marker" r="1"></circle>
   </svg>
</body>
</html>

CSS offset-path - 使用 path()

以下示例演示瞭如何使用 path() 建立 offset-path。

      
<html>
<head>
<style>
   body {
      background: #cfc7c6;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
   }
   .demoOffset {
      width: 300px;
      height: 300px;
      position: relative;
   }
   .track {
      fill: none;
      stroke: #1f1e1e;
      stroke-width: 2;
   }
   .object-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      clip-path: url(#clip);
   }
   .object {
      width: 50px;
      height: 35px;
      background-color: #4CAF50;
      position: absolute;
      offset-path: path("M 10,10 L 290,10 L 290,290 L 10,290 Z");
      offset-distance: 100%;
      offset-rotate: auto;
      animation: move 4s linear infinite;
   }
   .object:nth-child(2) {
      background-color: #FFC107;
      animation-delay: -0.3s;
   }
   .object:nth-child(3) {
      background-color: #2196F3;
      animation-delay: -1s;
   }
   .object:nth-child(4) {
         background-color: #f2514b;
         animation-delay: -1.3s;
   }
   @keyframes move {
      100% {
         offset-distance: 0%;
      }
   }
</style>
</head>
<body>
   <div class="demoOffset">
      <svg viewBox="0 0 300 300" width="300" height="300" class="track">
         <defs>
            <clipPath id="clip">
               <path d="M 10,10 L 290,10 L 290,290 L 10,290 Z" />
            </clipPath>
         </defs>
         <path d="M 10,10 L 290,10 L 290,290 L 10,290 Z" />
      </svg>
      <div class="object-container">
         <div class="object"></div>
         <div class="object"></div>
         <div class="object"></div>
         <div class="object"></div>
      </div>
   </div>
</body>
</html>

列印頁面