Open cloudtian opened 4 years ago
MDN上的解释： viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。 它包含4个参数： min-x, min-y, width, height；以空格或逗号分隔。不允许宽高为负值，<=0时则元素不会被渲染出来。 <svg width="200“ height="200" viewBox="0 0 100 100"> 这里定义了画布尺寸是200*200px，但viewBox属性定义了画布上可以显示的区域，从(0,0)点开始，100宽100高的区域。而这个100*100区域会放到200*200的画布上显示。于是就形成了放大两倍的效果。
<svg width="200“ height="200" viewBox="0 0 100 100">
首先绘出SVG的大小(width="100" height="100")，然后通过viewBox属性的参数(viewBox="0 0 50 50")可以截取到当前需要显示的视图大小。
将SVG内图形绘出来 矩形（x="0" y="0" width="100" height="20"）
如果使用的是百分比相对定位，则相对viewBox视图宽高来计算 矩形（x="0" y="0" width="100%" height="20%"）
通过伸展以适应容器。
使用百分比相对定位伸展适应容器后最终效果
<svg>元素宽高默认值是100%，会随着父容器宽高变化。
<svg>
MDN上的解释： viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
它包含4个参数： min-x, min-y, width, height；以空格或逗号分隔。不允许宽高为负值，<=0时则元素不会被渲染出来。
<svg width="200“ height="200" viewBox="0 0 100 100">这里定义了画布尺寸是200*200px，但viewBox属性定义了画布上可以显示的区域，从(0,0)点开始，100宽100高的区域。而这个100*100区域会放到200*200的画布上显示。于是就形成了放大两倍的效果。
SVG设置了大小
首先绘出SVG的大小(width="100" height="100")，然后通过viewBox属性的参数(viewBox="0 0 50 50")可以截取到当前需要显示的视图大小。
将SVG内图形绘出来
矩形（x="0" y="0" width="100" height="20"）
通过伸展以适应容器。
SVG未设置大小
<svg>元素宽高默认值是100%，会随着父容器宽高变化。