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 屬性
