offset-path

Baseline 2023

Newly available

Since August 2023, 此功能在最新设备和浏览器版本上有效。此功能可能不适用于旧设备或浏览器。

offset-path CSS 属性指定元素要遵循的路径，并确定元素在其路径父容器或 SVG 坐标系中的定位。路径可以是直线、曲线或几何形状，元素沿其定位或移动。

offset-path 属性与 offset-distance、offset-rotate 和 offset-anchor 属性结合使用，以控制元素沿路径的位置和方向。

语法

css

/* Default */
offset-path: none;

/* Line segment */
offset-path: ray(45deg closest-side contain);
offset-path: ray(contain 150deg at center center);
offset-path: ray(45deg);

/* URL */
offset-path: url(#myCircle);

/* Basic shape */
offset-path: circle(50% at 25% 25%);
offset-path: ellipse(50% 50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200");
offset-path: rect(5px 5px 160px 145px round 20%);
offset-path: xywh(0 5px 100% 75% round 15% 0);

/* Coordinate box */
offset-path: content-box;
offset-path: padding-box;
offset-path: border-box;
offset-path: fill-box;
offset-path: stroke-box;
offset-path: view-box;

/* Global values */
offset-path: inherit;
offset-path: initial;
offset-path: revert;
offset-path: revert-layer;
offset-path: unset;

Values

offset-path 属性的值可以是 <offset-path> 值、<coord-box> 值，或两者，也可以是 none 关键字。<offset-path> 值可以是 ray() 函数、<url> 值，或 <basic-shape> 值。

none

指定元素不遵循任何偏移路径。none 值等效于元素没有任何偏移变换。在这种情况下，元素的移动由其默认位置属性决定，例如 top 和 left，而不是偏移路径。这是默认值。

<offset-path>

一个ray()函数、一个<url>值或一个<basic-shape>值，用于指定几何偏移路径。如果省略，则<coord-box>值的路径形状为inset(0 round X)，其中X是建立包含块的元素的border-radius的值。

ray(): 定义一条从设定位置开始、具有设定长度并沿指定角度延伸的线。ray()函数最多接受四个参数：一个<angle>、一个可选的尺寸值、可选的关键字contain和一个可选的at <position>。
<url>: 指定一个SVG 形状元素的 ID。路径是 SVG <circle>、<ellipse>、<line>、<path>、<polygon>、<polyline>或<rect>元素的形状，通过其在url()函数中的id引用。如果 URL 未引用形状元素或无效，则偏移路径的解析值为path("M0,0")（这是一个有效的<basic-shape>值）。
<basic-shape>: 指定偏移路径为CSS 基本形状函数的等效路径，例如circle()、ellipse()、inset()、path()、polygon()、rect()或xywh()。例如，如果<basic_shape>是一个ellipse()函数，则路径为椭圆的轮廓，从椭圆的最右点开始，以顺时针方向进行全旋转。对于ellipse()和circle()，它们接受at <position>参数，如果省略<position>，则位置默认为center，除非元素指定了offset-position。在这种情况下，offset-position值用于at <position>参数。可以使用shape()函数定义更复杂的形状。

<coord-box>

指定包含路径的参考框的大小信息。参考框源于为该元素建立包含块的元素。此参数是可选的。如果未指定，则 CSS 上下文中的默认值为border-box。在 SVG 上下文中，该值被视为view-box。如果使用ray()或<basic-shape>定义偏移路径，则<coord-box>值分别为射线或<basic-shape>提供参考框。如果使用<url>定义偏移路径，则<coord-box>值将为形状元素提供视窗和用户坐标系，原点 (0 0) 位于左上角，大小为1px。

描述

offset-path属性定义了动画元素可以遵循的路径。偏移路径是具有一个或多个子路径的指定路径，或者是非样式化基本形状的几何形状。元素在偏移路径上的确切位置由offset-distance属性确定。每个形状或路径必须定义一个初始位置，用于offset-distance的计算值为0，以及一个初始方向，用于指定对象在初始位置的旋转。

规范的早期版本将此属性称为motion-path。它被更改为offset-path，因为该属性描述的是静态位置，而不是运动。

正式定义

初始值	`none`
适用范围	可变形元素
继承	否
计算值	如指定
动画类型	按计算值类型
创建堆叠上下文	是

正式语法

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

<offset-path> = 
  <ray()>        |
  <url>          |
  <basic-shape>  

<coord-box> = 
  <paint-box>  |
  view-box     

<ray()> = 
  ray( <angle>          &&
  <ray-size>?           &&
  contain?              &&
  [ at <position> ]? )  

<url> = 
  <url()>  |
  <src()>  

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<ray-size> = 
  closest-side     |
  closest-corner   |
  farthest-side    |
  farthest-corner  |
  sides            

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<length-percentage> = 
  <length>      |
  <percentage>

示例

使用盒子边缘定位创建偏移路径

此示例演示了在offset-path属性中使用各种<coord-box>值。

<div class="box blueBox"></div>
<div class="box redBox"></div>
<div class="box greenBox"></div>

body {
  width: 300px;
  height: 200px;
  border-radius: 50px;
  border: dashed aqua;
  border-width: 25px;
  padding: 25px;
  margin: 50px;
}

css

.box {
  width: 40px;
  height: 20px;
  animation: move 8000ms infinite ease-in-out;
}

.blueBox {
  background-color: blue;
  offset-path: border-box;
  offset-distance: 5%;
}

.greenBox {
  background-color: green;
  offset-path: padding-box;
  offset-distance: 8%;
}

.redBox {
  background-color: red;
  offset-path: content-box;
  offset-distance: 12%;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

在此示例中，边距、边框和填充被故意赋予了较大的值，以演示蓝色、绿色和红色矩形分别在它们各自的<coord-box>边缘上的放置位置：边框框、填充框和内容框。

The blue rectangle sits on the outer edge of the border box, the green rectangle is on the inner border edge, which is the outer edge of the padding box, and the red rectangle is on the outer edge of the content box.

结果

使用 path() 创建偏移路径

在此示例中，<svg>元素创建了一个带有烟囱的房子，还定义了剪刀的两半。房子和烟囱由矩形和多边形组成，剪刀的两半由两个不同的路径元素表示。在 CSS 代码中，offset-path属性用于指定剪刀的两半要遵循的路径。这个 CSS 定义的路径与 SVG 中<path>元素表示的路径相同，即包括烟囱在内的房子的轮廓。

html

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="700"
  height="450"
  viewBox="350 0 1400 900">
  <title>House and Scissors</title>
  <rect x="595" y="423" width="610" height="377" fill="blue" />
  <polygon points="506,423 900,190 1294,423" fill="yellow" />
  <polygon points="993,245 993,190 1086,190 1086,300" fill="red" />
  <path
    id="house"
    d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
    fill="none"
    stroke="black"
    stroke-width="13"
    stroke-linejoin="round"
    stroke-linecap="round" />
  <path
    id="firstScissorHalf"
    class="scissorHalf"
    d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
    transform="translate(0,0)"
    fill="green"
    stroke="black"
    stroke-width="5"
    stroke-linejoin="round"
    stroke-linecap="round"
    fill-rule="evenodd" />
  <path
    id="secondScissorHalf"
    class="scissorHalf"
    d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
    transform="translate(0,0)"
    fill="forestgreen"
    stroke="black"
    stroke-width="5"
    stroke-linejoin="round"
    stroke-linecap="round"
    fill-rule="evenodd" />
</svg>

css

.scissorHalf {
  offset-path: path(
    "M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190"
  );
  animation: followpath 4s linear infinite;
}

@keyframes followpath {
  to {
    offset-distance: 100%;
  }
}

结果

如果没有offset-path属性，剪刀的两半将默认位于画布的左上角。但是，通过使用offset-path，剪刀的两半与 SVG 路径的起点对齐，使它们可以沿着路径移动。

使用 url() 创建偏移路径

此示例说明如何引用 SVG 形状来定义元素可以遵循的路径的形状。绿色圆圈 (由.target定义) 遵循矩形的路径，该矩形通过将 SVG 形状的 ID (svgRect) 传递给offset-path属性并使用url()来定义。

定义路径形状的 SVG 矩形在此仅显示，以直观地演示绿色圆圈确实遵循由该矩形定义的路径。

html

<div class="outer">
  <div class="target"></div>
</div>
  <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect id="svgRect" x="50" y="50" width="200" height="100" />
  </svg>
</div>

.outer {
  position: absolute;
}

css

.target {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: green;
  offset-path: url(#svgRect);
  offset-anchor: auto;
  animation: move 5s linear infinite;
}

#svgRect {
  fill: antiquewhite;
  stroke: black;
  stroke-width: 2;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

规范

规范
运动路径模块级别 1 # offset-path-property

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

offset
offset-distance
offset-rotate
SVG <path>
path()
其他演示
- 使用各种形状值的示例，在 Codepen 上由 CSS-Tricks 提供。
- 沿曲线路径移动三角形，在 Codepen 上由 Eric Willigers 提供。
- 沿房屋形状移动一对剪刀，在 Codepen 上由 Eric Willigers 提供。
- 移动多对眼睛，在 JSFiddle 上由 Eric Willigers 提供。