【SVG专题】SVG坐标系统

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

本文介绍SVG坐标定位。

对于所有元素，SVG 使用的坐标系统或者说网格系统，和 Canvas 用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。注意，这和你小时候所学的数学坐标系是相反的。但是在 HTML 文档中，元素都是用这种方式定位的。

用户单位和屏幕单位的映射关系被称为用户坐标系统。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。

svg 坐标系

  • 示例一
1
2
3
<svg width="100" height="100">
  <!-- more -->
</svg>

上面的元素定义了一个 100*100px 的 SVG 画布，这里 1 用户单位等同于 1 屏幕单位。

  • 示例二
    1
    2
    3
    <svg width="200" height="200" viewBox="0 0 100 100">
      <!-- more -->
    </svg>

这里定义的画布尺寸是 200200px。但是，viewBox 属性定义了画布上可以显示的区域：从 (0,0) 点开始，100 宽100 高的区域。这个 100100 的区域，会放到 200200 的画布上显示。于是就形成了放大两倍的效果。