SVG 快速入门

SVG 全称是 Scalable Vector Graphics,即,矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先,不要把 SVG 和 CSS,Canvas,HTML 搞混。他们之间并没有你中有我,我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。

如何书写


     
     
     
     
     

大家看 svg 标签中带有一个 viewBox 的属性。这其实是 SVG 中一个很重要的概念,后面的缩放都会与它有关。
说到这里,我们就需要了解一下关于 SVG 的几个基本概念。

基本概念

简单来说有 3 个基本概念:

  • viewport: 物理窗口
  • viewbox: 实物窗口(算了,下面解释)
  • preserveAspectRatio: 保留横纵比

我们接下来,一个一个的进行讲解吧。

viewport

参照上面的 demo,这实际上就是你用 x,y,width,height。这 4 个属性,在页面上固定的矩形区域。

viewbox

定义 SVG 元素在 viewport 中的具体尺寸比例。假设有如下内容:


 

  • viewport 为 [0,0] 到 [500,200]
  • viewbox 为 [0,0] 到 [50,20]

默认情况下 SVG 是自动填充满 viewport 的。注意,在 SVG 中,子标签的所有尺寸都是不能带单位的,因为初始单位就是根据上面两个概念确定。
当为以上情况,SVG 中基本的尺寸则不是 1px,而是 500/50 = 10px。所以,如下的图形大小为:


也就是在 SVG 里面定义的 rect 图形,它的实际尺寸为 [200,100] 到 [100,50]。

preserveAspectRatio

该属性就是用来定义上面 viewport 和 viewbox 相互对齐的方式。换句话就是说,它的属性可以改变 viewbox 的具体位置。基本格式为:

 []
  • align: 定义 viewport 和 viewbox 的对齐方式,分为 x,y 轴两个方向。X 轴方向有三种方式:左边重合(xMin),x 轴中点重合(xMid),右边重合(xMax)。同理,Y 轴也有 顶边重合(YMin),y 轴中点重合(YMid),底边边重合(YMax)
  • meetOrSlice: 主要就是定义该 SVG 是内嵌,还是裁剪或是 none(听天有命)。

其中,align 需要着重理解一下。首先,它的默认值为 xMidYMid,即为中点重合。
61401

可以从图中看出,viewbox 是通过中心进行延展的。注意,它的原点坐标还是在 viewbox 的左上角。如果你是动态增加尺寸的话,此时并不是从左到右增加,而是从中心向两端扩张。同理,如果你使用的是 xMinYMin 的话,那么如果存在尺寸变化,那么相对点则是从左上角开始的。简单来说,align 相对点其实一共有 9 个。
61402
然后就是 meet || slice || none 这三个属性具体干的事情。
在这之前,我们需要了解一个公式–缩放比计算公式:

vb_h * rat_y = vp_h; 或者 vb_w * rat_x = vp_w;
其中,vb_ 为 viewbox 简写,vp_ 为 viewport 的简写。vb_h 代表就是 viewbox height。vb_w 代表就是 viewbox width。rat_x/y 代表的是 x,y 轴的缩放比例。
假设有下列情况:


    

SVG 快速入门

扫一扫手机访问