关于SVG的viewBox

时间 2019-11-05

标签关于 svg viewbox 繁體版

原文原文链接

在SVG中,经过svg标记的 width和height能够规定这段SVG代码所表达的数据在绘制时所占用的空间大小svg

以下代码svg设置了宽度与高度，rect一样，因此结果天然是全屏工具

<svg width="200" height="150" style="border:1px solid #cd0000;">
    <rect width="200" height="150" fill="#cd0000" />
</svg>

考虑下，是否是这段SVG代码中所表达的数据所有都可被绘制出来达到可见呢? code

svg出现了一个新的概念：viewBoxblog

SVG就像是咱们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示get

viewBox参数it

viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度class

代码稍微修正下，增长viewBox控制im

<svg width="200" height="150" viewBox="0,0,400,300" style="border:1px solid #cd0000;">
    <rect width="200" height="150" fill="#cd0000" />
</svg>

rect一样与svg尺寸一直，可是显示出来的大小确等比缩小了一倍数据

试着简单的理解：强制把分辨率提高到400*300 ，那么原来的svg尺寸是200*150，相对于400*300就等比缩小一倍了margin

一样的，若是把viewBox缩小一倍，那么反之svg会增长一倍

<svg width="200" height="200" viewBox="0,0,100,100" style="border:1px solid #cd0000;">
    <rect width="200" height="200" fill="#cd0000" />
</svg>