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

使用标签进行图形分组

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

SVG坐标系统

SVG中的图形分组和坐标系统_第1张图片
  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. 参考坐标系
    使用其它坐标系来考究自身的情况时使用,即用别人的坐标系来衡量自己
SVG中的图形分组和坐标系统_第2张图片
用Ouser作为参考坐标系,矩形的坐标是(50, 50)

线性变换

  1. 平移
SVG中的图形分组和坐标系统_第3张图片
  1. 旋转
SVG中的图形分组和坐标系统_第4张图片
  1. 缩放
SVG中的图形分组和坐标系统_第5张图片

线性变换列表

SVG中的图形分组和坐标系统_第6张图片

你可能感兴趣的:(SVG中的图形分组和坐标系统)