Question

如何让SVG整体任意自动缩放

Answer 1

有一个SVG地图, 原始宽高已定, 现在需要在任意分辨率下确保地图可以缩放到合理大小, 并且是全图显示的, 不能只出来一截半截的样子.
我们都知道SVG是矢量图, 矢量图的最大优势就是可以任意缩放而不失真, 关键是如何让SVG整体缩放呢? 而且缩放时必须确保全图按比例缩放.
参考svg.map的实现, 发现关键在与确定SVG的viewBox属性
将viewBox属性设置为: 0 0 原始svg的宽 原始svg的高, 再就可以任意修改svg的宽高, 其内容就会自动缩放了
PS: 如果你无法确定原始SVG的宽高可以通过一些矢量图编辑工具(例如: Inkscape)来获得
或者通过代码来获取
<svg xmlns="" version="1.1"
style="width: 150px; height: 150px;">
<circle cx="200" cy="200" r="200" fill="red"></circle>
<circle cx="300" cy="500" r="200" fill="red"></circle>
</svg>
// {x: 0, y: 0, width: 500, height: 700}
svgEl.getBBox();

那么何为viewBox呢?
viewBox是SVG的虚坐标系, 为根节点svg元素加上viewBox属性后, 在svg下的各图形元素的大小和位置都是按viewBox限定的坐标, 而不是页面的实际坐标
例如
<svg width="100px" height="100px" viewBox="0 0 300 300">
<rect x="5" y="15" width="200" height="200"/>
</svg>
在 100x100 的svg区域中, 放入一个200x200的方块, 按理不能正常显示, 会被裁去一部分. 但是因为加入了viewBox属性, svg区域会完整显示rect. 可以理解为在svg中加入一个新坐标系, 按上例把svg划分为 300x300 份, rect占用200x200份, 而不是像素, 实际图形会缩放或拉伸.

下面来看一个直观的例子, 下面是我们原始的SVG内容
<svg xmlns="" version="1.1">
<!-- 这个圆的大小是400 x 400, 那么这个SVG的宽和高就是400了 -->
<circle cx="200" cy="200" r="200" fill="red"/>
</svg>

固定SVG的viewBox, 测试任意宽高缩放
<svg xmlns="" version="1.1" width="100" height="100"
viewBox="0 0 400 400">
<!-- 固定viewBox, 关键是确定原始SVG的宽高 -->
<circle cx="200" cy="200" r="200" fill="red"/>
</svg>