一、在svg中，使用 <g> 標簽來創建分組

• <g> 標簽內部的圖形，會繼承其屬性
• <g> 可以使用 transform 屬性進行坐標變換，變換之后可以理解為新的自身坐標系
• <g> 標簽可以嵌套使用

二、<g> 分組坐標變換的實例

<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) 后，自身坐標系整體下移50像素（下圖紫色坐標系）
• <rect> 標簽的位置x、y值，都是相對于父級<g>對應的坐標系 的值（為什么呢？請看下一篇）
• 當有嵌套時，依次類推
  

如何理解坐標系呢？請繼續看下一篇文章

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。