transform-origin
**transform-origin** SVG 屬性設定專案的變換原點。
您可以將此屬性與任何 SVG 元素一起使用。
注意：作為 SVG 中的呈現屬性，transform-origin 在語法和行為上與 CSS 中的 transform-origin 屬性相對應，並且可以用作 CSS 屬性來設定 SVG 樣式。有關更多資訊，請參見CSS transform-origin 屬性。
使用說明
| 值 | 參見 transform-origin |
| 預設值 | 0, 0 |
| 可動畫化 | 是 |
注意：transform-origin 的預設值為除根 <svg> 元素和作為 foreignObject 的直接子元素的 <svg> 元素以外的所有 SVG 元素的 0 0，它們的 transform-origin 為 50% 50%，類似於其他 CSS 元素。
transform-origin 屬性可以使用一個、兩個或三個值指定，其中每個值代表一個偏移量。未明確定義的偏移量將重置為其對應的初始值。
如果定義了一個單個<length> 或 <percentage> 值，它代表水平偏移量。
如果定義了兩個或更多個值，並且沒有值是關鍵字，或者唯一使用的關鍵字是 center，那麼第一個值代表水平偏移量，第二個值代表垂直偏移量。
- 單值語法
- 該值必須是
<length>，或以下關鍵字之一：left、center、right、top和bottom。
- 該值必須是
- 雙值語法
- 一個值必須是
<length>、<percentage>，或以下關鍵字之一：left、center和right。 - 另一個值必須是
<length>、<percentage>，或以下關鍵字之一：top、center和bottom。
- 一個值必須是
- 三值語法
- 前兩個值與雙值語法相同。
- 第三個值必須是
<length>。它始終代表 Z 偏移量。
示例
此示例顯示了一個 PNG 影像和三個 SVG 影像的程式碼。
- 一個 PNG 參考影像。
- 一個不使用任何變換的 SVG 參考影像。
- 一個使用
transform-origin進行變換的 SVG 影像，預期結果是與參考影像相同的影像。 - 一個不使用
transform-origin但使用transform進行相同變換的 SVG 影像，預期結果是與參考影像相同的影像。
第四個影像顯示瞭如何在不支援 transform-origin 的瀏覽器中進行變換——因為第四個影像的程式碼與第三個影像的基於 transform-origin 的程式碼執行相同的變換，但僅使用 transform，而不使用 transform-origin。
注意：這些示例使用 Stack Overflow 問題 中來自 Maxim Kulikov 的程式碼片段的修改版本，以及來自 Michael Mullany 的程式碼片段的修改版本，該程式碼片段隨問題一起提供。這兩個程式碼片段均根據 CC BY-SA 許可的條款使用。）
HTML
html
<h4>Reference image</h4>
<div>
<figure>
<img src="reference.png" alt="PNG reference image" />
<figcaption>
Figure 1. PNG reference image. The images following this should look
exactly the same as this.
</figcaption>
</figure>
</div>
<div>
<figure>
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
viewBox="0 0 200 200">
<circle cx="100" cy="100" r="100" stroke="none" fill="black" />
<line
x1="100"
y1="0"
x2="100"
y2="200"
stroke="rebeccapurple"
stroke-width="2" />
<line
x1="0"
y1="100"
x2="200"
y2="100"
stroke="rebeccapurple"
stroke-width="2" />
<circle cx="100" cy="100" r="75" stroke="none" fill="blue" />
<line
x1="100"
y1="25"
x2="100"
y2="175"
stroke="rebeccapurple"
stroke-width="1.5" />
<line
x1="25"
y1="100"
x2="175"
y2="100"
stroke="rebeccapurple"
stroke-width="1.5" />
<circle cx="100" cy="100" r="50" stroke="none" fill="red" />
<line
x1="100"
y1="50"
x2="100"
y2="150"
stroke="rebeccapurple"
stroke-width="1" />
<line
x1="50"
y1="100"
x2="150"
y2="100"
stroke="rebeccapurple"
stroke-width="1" />
<circle cx="100" cy="100" r="25" stroke="none" fill="yellow" />
<line
x1="100"
y1="75"
x2="100"
y2="125"
stroke="rebeccapurple"
stroke-width="0.5" />
<line
x1="75"
y1="100"
x2="125"
y2="100"
stroke="rebeccapurple"
stroke-width="0.5" />
</svg>
<figcaption>
Figure 2. SVG reference image. The images following this should look
exactly the same as this.
</figcaption>
</figure>
</div>
<h4>Transformation with transform-origin</h4>
<div>
<figure>
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
viewBox="0 0 200 200">
<defs>
<g id="target-g-1">
<circle cx="100" cy="100" r="100" stroke="none" />
<line
x1="100"
y1="0"
x2="100"
y2="200"
stroke="rebeccapurple"
stroke-width="2" />
<line
x1="0"
y1="100"
x2="200"
y2="100"
stroke="rebeccapurple"
stroke-width="2" />
</g>
</defs>
<use href="#target-g-1" fill="black" />
<use
href="#target-g-1"
fill="blue"
transform="scale(0.75 0.75)"
transform-origin="100 100" />
<svg
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
width="200"
height="200"
viewBox="0 0 200 200">
<use
href="#target-g-1"
fill="red"
transform="scale(0.5 0.5)"
transform-origin="100 100" />
<use
href="#target-g-1"
fill="yellow"
transform="scale(0.25 0.25)"
transform-origin="100 100" />
</svg>
</svg>
<figcaption>
Figure 3. transform-origin used. This image should look exactly the same
as the reference image in Figure 2.
</figcaption>
</figure>
</div>
<h4>Transformation without transform-origin</h4>
<div>
<figure>
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
viewBox="0 0 200 200">
<defs>
<g id="target-g-1">
<circle cx="100" cy="100" r="100" stroke="none" />
<line
x1="100"
y1="0"
x2="100"
y2="200"
stroke="rebeccapurple"
stroke-width="2" />
<line
x1="0"
y1="100"
x2="200"
y2="100"
stroke="rebeccapurple"
stroke-width="2" />
</g>
</defs>
<use href="#target-g-1" fill="black" />
<use
href="#target-g-1"
fill="blue"
transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)" />
<svg
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
width="200"
height="200"
viewBox="0 0 200 200">
<use
href="#target-g-1"
fill="red"
transform="translate(100 100) scale(0.5 0.5) translate(-100 -100)" />
<use
href="#target-g-1"
fill="yellow"
transform="translate(100 100) scale(0.25 0.25) translate(-100 -100)" />
</svg>
</svg>
<figcaption>
Figure 4. transform-origin not used. This image should look exactly the
same as the reference image in Figure 2.
</figcaption>
</figure>
</div>
CSS
css
h4 {
font-family: sans-serif;
}
figure {
border: thin #c0c0c0 solid;
display: inline-flex;
flex-flow: column;
padding: 5px;
max-width: 200px;
margin: auto;
}
figcaption {
margin-top: 5px;
background-color: #222;
color: #fff;
font: smaller sans-serif;
padding: 3px;
text-align: center;
}
結果
規範
| 規範 |
|---|
| CSS 變換模組級別 1 # transform-origin-property |
| 可縮放向量圖形 (SVG) 2 # PresentationAttributes |
瀏覽器相容性
BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。