手册
目录
收藏636
分享
阅读1118
更新时间2025-07-16
offset-anchor 属性指定元素上固定在由 offset-path 属性定义的路径上的点。
如果使用 offset-rotate 属性旋转元素，则 offset-anchor 属性定义的点也将成为旋转中心。
将 元素的右中心点固定在定义的路径上：
img {
offset-path: path('M 50 80 C 150 -20 250 180 350 80');
offset-anchor: right center;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
offset-anchor: auto|value|initial|inherit;
| 值 | 描述 |
|---|---|
| auto | 默认值。锚点位于元素的中心，等同于属性值 50% 50%。 |
|
如果只指定一个关键字，另一个值将为 "center"。 |
| xpos ypos |
第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。 单位可以是像素（0px 0px）或任何其他 CSS 单位。 如果只指定一个值，另一个值将为 50%。 可以混合使用 % 和位置。 |
| x% y% |
第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果只指定一个值，另一个值将为 50%。 默认值为：50% 50%。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
| 默认值： | auto |
|---|---|
| 继承性： | 否 |
| 动画制作： | 支持。请参阅：动画相关属性。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.offsetAnchor="bottom right" |
表格中的数字表示首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 116 | 116 | 72 | 16 | 102 |
教程：SVG 路径
教程：CSS 动画
参考：CSS offset 属性
参考：CSS offset-distance 属性
参考：CSS offset-path 属性
参考：CSS offset-position 属性
参考：CSS offset-rotate 属性
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
