SVG基础变形

发表于 更新于 分类于 ， ， ， 阅读次数：

本篇介绍图形的变换与分组：平移、旋转、缩放等的用法。

所有的变形都会用一个元素的transform属性实现。变形可以连缀，只要把它们连接起来就行，用空格隔开。

  • translate(x, y) ： 平移到指定坐标，默认 (0, 0)

  • rotate(angle, cx, cy) ：旋转指定角度

  • scale(sx, sy) ：缩放指定比例，如果省略第二个参数，默认等于第一个参数

  • skewX()/skewY(): 斜切

  • matrix(a, b, c, d, e, f) ：复杂变形

  • 示例：

1
2
3
4
5
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
  <!-- 右移并旋转的矩形 -->
  <rect x="10" y="30" width="40" height="20" fill="#FFD54F" transform="translate(40,0) rotate(20 30 40)" />
  
</svg>
  • 成品展示：

小结

变换与分组能显著提升图形复用性与结构清晰度，建议在复杂图形中充分使用。