svg 缩放-如何使用 SVG 进行缩放和平移

以鼠标为焦点缩放 = 以原点为焦点缩放 + 位移。利用svg的属性viewbox:x,y控制位移,width,height控制缩放。

在当前视窗内,改变viewBox的width与height即可实现以左上角为原点的缩放,故只需计算以左上角为焦点缩放后和以鼠标位置为焦点缩放后两个原点的偏移量即可。后文不再赘述scale与viewbox的关系。

以鼠标位置为基准计算新原点位置

对 SVG 图进行缩放和平移的最简单方法是使用浏览器自带的缩放和滚动功能。在 Internet Explorer 9 中,下表描述了与缩放相关的鼠标和键盘快捷方式。

用户操作

键盘快捷键 鼠标快捷键

放大 Ctrl + 加号 Ctrl + <向前滚动滚轮>

缩小 Ctrl + 减号 Ctrl + <向后滚动滚轮>

返回默认缩放级别 Ctrl + 0 不适用

使用浏览器的滚动条可在缩放图中轻松进行平移。

有一个SVG地图, 原始宽高已定, 现在需要在任意分辨率下确保地图可以缩放到合理大小, 并且是全图显示的, 不能只出来一截半截的样子.

我们都知道SVG是矢量图, 矢量图的最大优势就是可以任意缩放而不失真, 关键是如何让SVG整体缩放呢? 而且缩放时必须确保全图按比例缩放.

参考的实现, 发现关键在与确定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}

();

那么何为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>