一、在svg中，使用 <g> 標(biāo)簽來創(chuàng)建分組

• <g> 標(biāo)簽內(nèi)部的圖形，會(huì)繼承其屬性
• <g> 可以使用 transform 屬性進(jìn)行坐標(biāo)變換，變換之后可以理解為新的自身坐標(biāo)系
• <g> 標(biāo)簽可以嵌套使用

二、<g> 分組坐標(biāo)變換的實(shí)例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"><g stroke="green" fill="none" transform="translate(0, 50)"><rect x="100" y="50" width="100" height="50"></rect><rect x="140" y="100" width="20" height="120"></rect></g> </svg>

• <g> translate(0, 50) 后，自身坐標(biāo)系整體下移50像素（下圖紫色坐標(biāo)系）
• <rect> 標(biāo)簽的位置x、y值，都是相對(duì)于父級(jí)<g>對(duì)應(yīng)的坐標(biāo)系 的值（為什么呢？請(qǐng)看下一篇）
• 當(dāng)有嵌套時(shí)，依次類推
  

如何理解坐標(biāo)系呢？請(qǐng)繼續(xù)看下一篇文章

總結(jié)

以上是生活随笔為你收集整理的04——svg中的图形分组＜g＞的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。