svg04——svg中的图形分组<g>

一、在svg中,使用 标签来创建分组

  • 标签内部的图形,会继承其属性
  • 可以使用 transform 属性进行坐标变换,变换之后可以理解为新的自身坐标系
  • 标签可以嵌套使用

二、 分组坐标变换的实例


  
    
    
  
  • translate(0, 50) 后,自身坐标系整体下移50像素(下图紫色坐标系)
  • 标签的位置x、y值,都是相对于父级对应的坐标系 的值(为什么呢?请看下一篇)
  • 当有嵌套时,依次类推
    svg04——svg中的图形分组<g>_第1张图片

    如何理解坐标系呢?请继续看下一篇文章

你可能感兴趣的:(前端svghtmlcss)