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 的浏览器中加载。