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