元素在其父容器或 SVG 坐标系内的路径由 offset-path CSS 属性指定。
确定元素位置的路径或沿其移动，可能是直线、曲线或其他形状。
offset-path 属性用于控制元素沿给定路径的位置和方向，与 offset-distance、offset-rotate ，和 offset-anchor。
offset-path 属性定义路径动画元素可以遵循，可以是带有子路径的指定路径，也可以是基本形状。
它确定元素的确切位置，以及初始位置和方向。以前称为运动路径，现在描述静态位置。
属性值
offset-path 属性可以接受像 offset-path、<coord-box>，或两者；它也可以接受关键字 none。一个<url>，一个<basic-shape>，或者 ray() 函数可能是偏移路径的值。
none: none 值表示没有任何偏移路径的元素，基于它的默认位置属性如 top 和 left，而不是offset-path。
<offset-path>- 可以使用 ray() 函数指定 offset-path 属性，即 <url> 值，或 <basic-shape> 值。
ray(): ray() 函数创建一条具有固定起始位置、长度和角度的线。
url(): SVG 形状元素可以通过 offset-path 属性在 url() 函数中使用其 ID 来引用。
<basic-shape>: 使用 CSS 基本形状函数，例如 circle(), ellipse(), inset(), path(), polygon()、rect() 或 xywh() 设置偏移路径属性。
<coord-box>: 名为 <coord-box> 的可选参数是 offset-path 属性的一部分。参考框大小（通常是 SVG 中的视图框或 CSS 中的边框框）由偏移路径确定，偏移路径由 <coord-box> 定义。
适用
可转换元素
语法
offset-path = none | <offset-path> || <coord-box> CSS offset-path: url()
以下示例演示了创建偏移量-path 使用 url()。
<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>