svg之ViewBox详解

先来看一下svg的格式：

其中 xmlns 是一个命名空间的声明，xmlns：xlink 是 命名空间前缀
使用js动态创建一个svg的image元素

var SVG_NS = 'http://www.w3.org/2000/svg';
var XLink_NS = 'http://www.w3.org/1999/xlink';
var image = document.createElementNS(SVG_NS, 'image');
image.setAttributeNS(null, 'width', '100');
image.setAttributeNS(null, 'height', '100');
image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');

svg中的width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小（可视大小）
svg中viewBox (0 0 200 200) :0 0 表示x轴和y有的其实位置，后面200, 200 表示长和宽但是只是一个数量，不会有具体的长度
那么如何让这样一个svg在长宽为100*100px的div中显示全呢？
viewBox就是干这个的
1/2 = 100（实际viewport大小） / 200（viewBox视窗大小）
svg 中所有的尺寸 * 1/2，这样就完全显示在100 * 100的容器中了

接下来要说的就是：preserveAspectRatio

preserveAspectRatio=”align meetOrSlice” or preserveAspectRatio=”none”
该属性的意思是维持纵横比,作用于viewBox属性
align
参数的值有分为两个部分，第一个部分指定x坐标的对齐方式，第二部分指定y坐标的对齐方式，如下：

• xMin viewBox的最小X值对齐viewport的左边部
• xMid viewBox的X轴中点对齐viewport的X轴中点
• xMax viewBox的最大X值对齐viewport的右边部
• YMin viewBox的最小y值对齐viewport的顶边
• YMid viewBox的y轴中点对齐viewport的y轴中点
• YMax viewBox的最大Y值对齐viewport的底边
  X对齐和Y对齐两两结合，组成一个align参数，例如，xMaxYMax
  meet or slice
• meet 保持纵横比缩放viewBox适应viewport。ps:整个viewbox包含在viewport里
• slice 保持纵横比同时比例小的方向放大填满viewport
  none
• none不保留宽高比，缩放图像适合整个viewport （会变形）