svg之ViewBox详解

先来看一下svg的格式：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 215 215;" xml:space="preserve" width='100px' height='100px'>
<circle style="fill:#99CCCC;" cx="107.5" cy="107.5" r="106.5"/>
</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 （会变形）

猜你喜欢