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>

打印页面