在线演示：

Demo for article: SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio

以下内容都是基于preserveAspectRatio为默认状态时的情况，也就是不考虑preserveAspectRatio。

为什么设置viewBox的min-x, min-y后，如果设置的是正值，图像反而会向左/上移动，而设置负值则向右/下移动呢？
我是这么理解的：

  1. viewBox的左上角总是和视窗的左上角对齐。

  2. 在设置viewBox的min-x、min-y后，

    1. 首先，图像的位置并不会移动；
    2. 如果设置的为正值，viewBox的起点就会向右/下移动；
    3. 由于图像位置不变，还是基于视窗的左上角，所以图像会被裁切。如果设置的是负值，就相当于PS中扩展画布，左/上会填充空白。
    4. 之后，viewBox的起点会移动到视窗的原点位置，所以，如果设置的值是正值，图像就会被裁切，而如果设置的是负值，就会发现图像左左侧/上侧填充了空白。
    5. viewBox起点与视窗的起点对齐，这时候就出现了文章开始让人疑惑的现象。

这里有张鑫旭的文章，讲解的非常透彻
理解SVG viewport,viewBox,preserveAspectRatio缩放 张鑫旭

标签: SVG

添加新评论