transform-origin
transform-origin SVG 屬性用於設定元素變換的基點。
您可以將此屬性與任何 SVG 元素一起使用。
注意： 作為演示屬性，transform-origin 還有一個 CSS 屬性對應的版本：transform-origin。當兩者都被指定時，CSS 屬性具有更高的優先順序。
用法說明
| 值 | 參見 transform-origin |
| 預設值 | 0 0 |
| 可動畫的 | 是 |
注意： 預設情況下，除根 <svg> 元素和作為 foreignObject 直接子元素的 <svg> 元素外，所有 SVG 元素的 transform-origin 預設值為 0 0。這些元素具有 transform-origin: 50% 50%，與普通的 CSS 行為一致。
指定的長度、百分比和關鍵字（left、center、right、top 和 bottom）都相對於 參考框。由於 transform-box 的預設值為 view-box，變換原點的座標相對於 SVG 元素的 viewBox，除非元素本身有相關的 CSS 佈局框。
示例
以下示例展示了圍繞不同 transform-origin 點旋轉矩形框 30° 的效果。在每種情況下，SVG 都宣告為原始框用虛線紅色輪廓繪製，然後是旋轉後的框用亮綠色繪製，最後 transform-origin 用紅色十字準星標記繪製。
預設變換原點
預設情況下，transform-origin 的值為 0 0，將其放置在 viewBox 的原點。下面，我們擴充套件了 viewBox 以包含負值，以便您能看到完整的十字準星標記，並請注意它可能並非始終是 <svg> 元素的左上角。
<svg
viewBox="-10 -10 300 300"
xmlns="http://www.w3.org/2000/svg"
width="310"
height="310">
<rect
x="60"
y="10"
width="180"
height="180"
fill="none"
stroke="red"
stroke-width="3"
stroke-dasharray="3 3" />
<rect
x="60"
y="10"
width="180"
height="180"
fill="lime"
opacity="0.5"
transform="rotate(30)" />
<g transform="translate(0 0)">
<circle cx="0" cy="0" r="3" fill="red" opacity="0.5" />
<path d="M -8 0 h 16 m -8 -8 v 16" fill="none" stroke="red" />
<circle cx="0" cy="0" r="6" fill="none" stroke="red" />
</g>
</svg>
中心變換原點
下面，我們將 transform-origin 設定為 center，它將原點放置在 viewBox 的中心，但不是被變換元素的中心。
<svg
viewBox="-10 -10 300 300"
xmlns="http://www.w3.org/2000/svg"
width="310"
height="310">
<rect
x="60"
y="10"
width="180"
height="180"
fill="none"
stroke="red"
stroke-width="3"
stroke-dasharray="3 3" />
<rect
x="60"
y="10"
width="180"
height="180"
fill="lime"
opacity="0.5"
transform="rotate(30)"
transform-origin="center" />
<g transform="translate(150 150)">
<circle cx="0" cy="0" r="3" fill="red" opacity="0.5" />
<path d="M -8 0 h 16 m -8 -8 v 16" fill="none" stroke="red" />
<circle cx="0" cy="0" r="6" fill="none" stroke="red" />
</g>
</svg>
相對於被變換元素的變換原點
要使 transform-origin 相對於被變換的元素，您可以使用 transform-box 屬性。下面，我們將 transform-box 設定為 fill-box，這使得 transform-origin 相對於被變換元素的邊界框。
<svg
viewBox="-10 -10 300 300"
xmlns="http://www.w3.org/2000/svg"
width="310"
height="310">
<rect
x="60"
y="10"
width="180"
height="180"
fill="none"
stroke="red"
stroke-width="3"
stroke-dasharray="3 3" />
<rect
class="transformed-elem"
x="60"
y="10"
width="180"
height="180"
fill="lime"
opacity="0.5"
transform="rotate(30)"
transform-origin="center" />
<g transform="translate(150 100)">
<circle cx="0" cy="0" r="3" fill="red" opacity="0.5" />
<path d="M -8 0 h 16 m -8 -8 v 16" fill="none" stroke="red" />
<circle cx="0" cy="0" r="6" fill="none" stroke="red" />
</g>
</svg>
.transformed-elem {
transform-box: fill-box;
}
有關更多示例，請參閱 CSS transform-origin。
規範
| 規範 |
|---|
| CSS 變換模組級別 1 # transform-origin-property |
| Scalable Vector Graphics (SVG) 2 # PresentationAttributes |
瀏覽器相容性
載入中…
另見
- CSS
transform-origin屬性