乐趣区

关于前端:svg04svg中的图形分组<g>

一、在 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> 对应的坐标系 的值(为什么呢?请看下一篇)
  • 当有嵌套时,顺次类推

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

退出移动版