（1）SVG-ViewBox属性解析

1、是个矩形区域

viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素。

定义了一个矩形区域，该区域内的内容将被显示

2、包含4个要素

四个空格分隔的数字组成：min-x min-y width height，分别代表视图盒左上角的坐标以及宽度和高度

3、3个作用

裁剪：当viewBox尺寸小于SVG元素的实际尺寸时，会裁剪超出的部分。

缩放：viewBox可以用来调整SVG内容的缩放比例，使得内容能够适应不同的容器尺寸。

定位：通过改变viewBox的位置，可以调整SVG内容的显示位置。

4、使用场景

如果你是产品，UI设计，尤其App,Pad 会用到xd，或者国产蓝湖，masterGo。每一个界面，都会有一个容器，如手机尺寸之类的，设计的元素超过这个容器，就无法显示。 

5、使用例子

（1）基本使用

这里我们定义了一个100x100的SVG画布，viewBox同样设为100x100。这意味着整个SVG内容将按照原始比例显示
<svg width="100" height="100" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>

6、总结

内部元素就会先按照 width-1 / width-2 与 height-1 / height-2 中较小的那个比例进行缩放（假设这个较小的比例为 m），然后在缩放的基础上，水平方向上移动 min-x / width-3 * m 个像素，正值向左移动，负值向右移动，竖直方向上移动 min-y / height-3 * m 个像素，正值向上移动，负值向下移动（这两个方向与通常情况下的坐标系的正方向相反）。

<svg width="width-1" height="height-1" viewBox="min-x min-y width-2 height-2">
	/* 内部元素…… */
	<rect width="width-3" height="height-3" fill="green"></rect>
</svg>

 

7、viewport和viewbox的区别

• viewport 视口，相当于显示器屏幕。
• viewbox 视区，相当于在屏幕上截取一小块，放大到整个屏幕，就是特写的效果
• preserveAspectRatio 指定viewbox与viewport的对齐方式和缩放方式。

7、preserveAspectRatio 属性

<svg width=“10cm” height=“10cm” style={{border: ‘1px solid #666’, backgroundColor: ‘pink’}}>
    <rect x=“50” y=“100” width=“50” height=“50”stroke=“#000000” fill=“black”/>
    <rect x=“100” y=“100” width=“50mm” height=“50mm”stroke=“#000000” fill=“#666” />


<svg width=“500” height=“75” viewBox=“0 0 250 75” preserveAspectRatio=“xMinYMin slice” style={{border: “1px solid #cccccc”}}>
<rect x=“1” y=“1” width=“50” height=“50” style={{stroke: “red”, fill: “none”}} />

preserveAspectRatio=“xMinYMin slice”

preserveAspectRatio 是用来控制缩放的比例，

preserveAspectRatio属性采用以空格分隔的两个值。

第一个值xMinYMin告诉视图框(ViewBox)如何在视口(Viewport)内对齐。此值本身由两部分组成。

第二个值scale指示如何保留宽高比（如果有的话）

scale是对svg本身以及其内部的元素都进行了缩放。而且参考位置是其中心点

 

<svg width=“100” height=“100” transform=“scale(0.7,1)” style={{border: “1px solid #cccccc”, marginLeft: ‘20px’}}>

<rect x=“1” y=“1” width=“50” height=“50” style={{stroke: “red”, fill: “none”}} />


<svg width=“100” height=“100” style={{border: “1px solid #cccccc”}}>

<rect x=“1” y=“1” width=“50” height=“50” style={{stroke: “red”, fill: “none”}} />