SVG 定位 [英] SVG Positioning

问题描述

我正在尝试使用 SVG，但在定位方面遇到了一些问题.我有一系列包含在 g 组标签中的形状.我希望像容器一样使用它，这样我就可以设置它的 x 位置，然后该组中的所有元素也会移动.但这似乎不可能.

I'm having a play with SVG and am having a few problems with positioning. I have a series of shapes which are contained in the g group tag. I was hoping to use it like a container, so I could set its x position and then all the elements in that group would also move. But that doesn't seem to be possible.

1. 大多数人如何定位一组您希望同时移动的元素?
2. 有相对定位的概念吗?例如相对于其父级

推荐答案

g 元素中的所有内容都相对于当前变换矩阵进行定位.

Everything in the g element is positioned relative to the current transform matrix.

要移动内容，只需将变换放在 g 元素中即可:

To move the content, just put the transformation in the g element:

<g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
</g>

链接:示例来自SVG 1.1 规范

这篇关于SVG 定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！