CSS offset-anchor 属性
示例
将 <img> 元素的右中心点固定到定义的路径上
img {
offset-path: path('M 50 80 C 150 -20 250 180 350 80');
offset-anchor: right center;
}
亲自试一试 »
定义和用法
offset-anchoroffset-path 属性定义的路径固定的元素上的点。
如果使用 offset-rotate 属性旋转元素，则由 offset-anchor 属性定义的点也将是旋转中心。
| 默认值 | auto |
|---|---|
| 继承 | 否 |
| 可动画 | 是。 了解 可动画属性 试一试 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.offsetAnchor="bottom right" 试一试 |
浏览器支持
表格中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| offset-anchor | 116 | 116 | 72 | 16 | 102 |
CSS 语法
offset-anchor: auto|value|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| auto | 默认值。锚定点将在元素的中心，与属性值 '50% 50%' 相同。 |
| left top left center left bottom right top right center right bottom center top center center center bottom |
如果只指定一个关键词，则另一个值为 "center" |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。左上角为 0 0。单位可以是像素 (0px 0px) 或任何其他 CSS 单位。如果只指定一个值，则另一个值为 50%。可以混合 % 和位置 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。左上角为 0% 0%。右下角为 100% 100%。如果只指定一个值，则另一个值为 50%。默认值为：50% 50% |
| initial | 将此属性设置为其默认值。 了解 initial |
| inherit | 从其父元素继承此属性。 了解 inherit |
相关页面
HTML SVG 教程：SVG 路径
CSS 教程：CSS 动画
CSS offset 属性：CSS Offset 属性
CSS offset-distance 属性：CSS Offset-distance 属性
CSS offset-path 属性：CSS Offset-path 属性
CSS offset-rotate 属性：CSS Offset-rotate 属性
