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 （会变形）

最后

以上就是火星上小鸭子为你收集整理的svg之ViewBox详解的全部内容，希望文章能够帮你解决svg之ViewBox详解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。