SVG定位

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

大多数人如何定位一组你希望同时移动的元素？

有相对定位的概念吗？例如,相对于其父母

Aaron Digull.. 256

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

要移动内容,只需将转换放在g元素中:

链接:实施例从该SVG 1.1规范

1> Aaron Digull..：

---

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

要移动内容,只需将转换放在g元素中:

链接:实施例从该SVG 1.1规范

2> Kağan Kayal..：

---

有一个较短的替代前一个答案.SVG元素也可以通过嵌套svg元素进行分组:

两个矩形是相同的(除了颜色),但父svg元素具有不同的x值.

请参见http://tutorials.jenkov.com/svg/svg-element.html.

---

对,SVG元素也可以是分组元素.我想指出SVG元素默认实现剪切(至少目前在Chrome中).这意味着任何溢出都不可见.与"g"元素不同.只要设置overflow ="visible"就可以恢复营业,如果这让你感到害怕.

---

使用svg代替g有什么缺点吗？

3> codedread..：

---

正如其他注释中所提到的,元素的transform属性g就是你想要的.使用transform="translate(x,y)"移动g内部和周围的事物g会相对于移动g.

4> fengshuo..：

---

有两种方法可以对多个SVG形状进行分组并定位组:

第一个与transform属性一起使用的Aaron写道.但是你不能只x在元素上使用一个属性.

另一种方法是使用嵌套元素.

这样,#group1 svg嵌套在#parent中,并且x=10相对于父svg.但是,你不能transform在元素上使用属性,这与元素完全相反.

---

为什么没有ax和y属性,而所有其他svg标签都有？这意味着位置在

---

@ user1952009:有机会 - 只是一个机会 - 你实际上并不了解进入SVG的设计选择.