CSS - offset-path 属性_CSS 菜鸟教程

元素在其父容器或 SVG 坐标系内的路径由 offset-path CSS 属性指定。

确定元素位置或沿其移动的路径可以是线条、曲线或其他形状。
offset-path 属性用于控制元素沿给定路径的位置和方向，以及 offset-distance、offset-rotate 和 offset-anchor。

offset-path 属性定义动画元素可以遵循的路径，可以是带有子路径的指定路径，也可以是基本形状。

它确定元素的确切位置，以及初始位置和方向。以前称为 motion-path，现在它描述静态位置。

可能的值

offset-path 属性可以接受 offset-path、<coord-box> 或两者等值;它也可以接受关键字 none。<url>、<basic-shape> 或 ray（）函数可能是偏移路径的值。

none - none 值表示没有任何 offset-path 的元素，基于其默认位置属性（如 top 和 left），而不是 offset-path。
<offset-path>- 可以使用 ray（）函数、<url> 值或 <basic-shape> 值指定 offset-path 属性。
ray（） - ray（）函数创建一条具有固定起始位置、长度和角度的线。
url（） - SVG 形状元素可以由 offset-path 属性在 url（）函数中使用其 ID 来引用。
<basic-shape> - 使用 circle（）、ellipse（）、inset（）、path（）、polygon（）、rect（）或 xywh（）等 CSS 基本形状函数来设置 offset-path 属性。
<coord-box> - 名为 <coord-box> 的可选参数是 offset-path 属性的一部分。引用框的大小，通常是SVG中的视图框或CSS中的边框框，由偏移路径确定，偏移路径由<coord-box>定义。

适用于

可转换元素

语法

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

CSS offset-path - 使用 url（）

以下示例演示了如何使用 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（）创建偏移路径。

<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>

<< CSS - offset-distance 属性 CSS - offset-rotate 属性 >>