CSS 函数 - path（）

CSS 函数 path（） 接受 SVG 路径字符串，并在 CSS 形状和 CSS 运动路径中用于定义形状的轮廓。

可能的值

<'fill-rule'> - 此属性确定填充路径内部的规则，包括非零或偶数等选项。默认值为非零。
<string> - 字符串用作定义 SVG 路径形状的数据。

语法

当在 offset-path 或 d 中使用时：


 path(<string>)

在 clip-path 中使用时：


 path([<'fill-rule'>,]?<string>)

CSS path（） - 基本示例

在以下示例中，path（） 函数用作 offset-path 属性的值，用于定义红色方块要遵循的特定路径。


<html>
<head>
<style>
	 	#shape {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: red;
	 	 	 offset-path: path("M10 80 Q 77.5 10, 145 80 T 280 80");
	 	 	 offset-distance: 0%;
	 	 	 animation: move 5s infinite linear;
	 	}
	 	@keyframes move {
	 	 	 from {
	 	 	 offset-distance: 10%;
	 	}
	 	to {
	 	 	 offset-distance: 100%;
	 	}
	 	}
</style>
</head>
<body>
<div id="shape"></div>
</body>
</html>

CSS path（） - 使用 svg

在以下示例中，path（） 函数是一个 CSS 函数，用于在 SVG 元素的 d 属性中定义复杂形状。
d 属性代表路径数据，用于确定元素的形状。
通过动画，path（） 函数改变了 d 属性，导致 d 元素的形状发生变化并创建视觉效果。


<html>
<head>
<style>
	 	svg {
	 	 	 width: 300px;
	 	 	 height: 200px;
	 	 	 background-color: lightgray;
	 	}
	 	path {
	 	 	 fill: blue;
	 	 	 animation: modifyPath 2s infinite alternate;
	 	}
	 	@keyframes modifyPath {
	 	 	 0% {
	 	 	 	 	 	 d: path("M50 50 L150 50 L100 150 Z");
	 	 	 }
	 	 	 100% {
	 	 	 	 	 	 d: path("M50 50 L150 50 L100 100 Z");
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<svg>
	 	<path></path>
	 	</svg>
</body>
</html>

打印本页