SVG元素缩放的问题

最新推荐文章于 2025-05-17 12:13:44 发布

原创最新推荐文章于 2025-05-17 12:13:44 发布 · 1.4w 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js #svg #浏览器 #缩放

JS 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了SVG元素的两种缩放方法：viewBox属性和transform属性。viewBox方法简单，但仅能实现等比例缩放且效果受限于属性设置；transform方法则允许任意缩放、平移和旋转，并可通过JS动态调整。两者各有优劣，适用于不同场景。

SVG元素缩放的问题

页面里嵌入的SVG元素，有时候需要对其进行缩放。

在网上研究了一下，SVG元素的缩放有两种方法。

一种是使用SVG元素的viewBox属性

（参考http://www.douban.com/note/271260021/）

viewBox的使用方法如下：

<svg xmlns="http://www.w3.org/2000/svg"version="1.1">
    <circlecx="200" cy="200" r="200" fill="red"/>
</svg>

这段SVG的代码，svg的显示需要400*400的空间。如果更改代码如下：

<svg xmlns="http://www.w3.org/2000/svg"version="1.1" width="100" height="100"viewBox="00 400 400">
    <circlecx="200" cy="200" r="200" fill="red"/>
</svg>

则可在100*100的空间里显示原本的全部内容，也就是说svg缩小为原来的1/4！

viewBox的作用是，把原svg中从(0,0)到(400,400)区域的内容，放到当前width=”100”和height=”100”的svg区域内。

viewBox方法的优点是实现简单。

缺点：

1、只能等比例绽放，示例中如果width=”100”，height=”200”，实际显示的效果如图，不是把svg拉伸为100*200，而是把svg放在y方向居中。

2、如果使用js动态改变svg元素的viewBox属性，不能达到预期的效果。

另一种方法是使用svg的transform属性

（参考http://www.360doc.com/content/10/1029/15/2716732_65020754.shtml）

Transform=”scale(sx,sy)”，sx和sy分别代表x方向和y方向拉伸或缩小的比例因子。如果大于1，则表示拉伸；如果小于1则表示缩小；若省略sy，则表示sy=sx，作等比例缩放。

transform的优点是可以做任意的缩放、平移、旋转，且可以用js动态更改属性。

缺点：不能在svg根元素中使用此属性，一般是给svg的所有直接子g元素添加此属性，才能达到缩放svg的效果。