SVG中的图形分组和坐标系统

使用<g>标签进行图形分组

  • <g>标签来创建分组
  • <g>标签中的子元素继承<g>标签中的属性
  • transform属性定义坐标变换
  • 可以嵌套使用

SVG坐标系统

  1. 用户坐标系
    svg是其下所有子元素的最终父元素，用户坐标系即svg本身的坐标系
  • OA是svg元素的坐标系，是用户坐标系
  1. 自身坐标系
    每个图形元素或独立分组自身带有坐标系
  • svg元素的自身坐标系是OA
  • id=“B”的元素的自身坐标系是OB
  • id="C"的元素的自身坐标系是OC
  • id="D"的元素的自身坐标系是OD
  1. 前驱坐标系
    父容器的坐标系
  • svg元素是所有元素的父元素，其没有父容器，故无前驱坐标系
  • id=“B”的元素的父元素是svg元素，其前驱坐标系是OA
  • id="C"的元素和id="D"的元素是一个整体，其共同父容器是id=“B”的元素，故其前驱坐标系是OB
  • 的自身坐标系是OB

自身坐标系在没有设置transform属性时，与其前驱坐标系重合

  1. 参考坐标系
    使用其它坐标系来考究自身的情况时使用，即用别人的坐标系来衡量自己
用Ouser作为参考坐标系，矩形的坐标是(50, 50)

线性变换

  1. 平移
  1. 旋转
  1. 缩放

线性变换列表

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容