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>
