CSS offset-anchor 属性
示例
将 <img> 元素的右中心点固定到指定路径
img {
offset-path: path('M 50 80 C 150 -20 250 180 350 80');
offset-anchor: right center;
}
自己动手试一试 »
定义和用法
offset-anchor
属性指定了元素上一个点,该点将沿由 offset-path
属性定义的路径固定。
由 offset-anchor
属性定义的点也将是旋转中心,如果使用 offset-rotate
属性对元素进行旋转的话。
默认值 | auto |
---|---|
继承 | no |
可动画 | 是。 阅读有关可动画的知识 尝试一下 |
版本 | CSS3 |
JavaScript 语法 | object.style.offsetAnchor="bottom right" 尝试一下 |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
属性 | |||||
---|---|---|---|---|---|
offset-anchor | 116 | 116 | 72 | 16 | 102 |
CSS 语法
offset-anchor: auto|值|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 属性