当前位置：首页 > news >正文

原生JS使用svg-pan-zoom库平移和缩放svg

news 2025/8/4 18:39:53

文章目录

svg-pan-zoom库
效果图
示例代码

svg-pan-zoom库

github地址：https://github.com/bumbu/svg-pan-zoom

效果图

可以在前端加载svg字符串显示svg，然后用中键平移svg，用滚轮缩放svg。

在这里插入图片描述

示例代码

可以从github下载用于生产环境的压缩版js：svg-pan-zoom.min.js，或者使用cdn地址。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- <script src="svg-pan-zoom.min.js"></script> --><script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.5.0/dist/svg-pan-zoom.min.js"></script><style>html,body,#svgContainer {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;border: red;}</style></head><body><div id="app"><div id="svgContainer"></div></div></body><script>init();async function init() {let svgStr = await this.getSvgStr("./test.svg");// 设置div的内容为svg字符串document.getElementById("svgContainer").innerHTML = svgStr;let svgElement = document.querySelector("svg");svgElement.setAttribute("width", "100vw");svgElement.setAttribute("height", "100vh");//创建svg控制平移缩放的实例let panZoom = svgPanZoom(svgElement, {zoomEnabled: true,panEnabled: true,maxZoom: 500,minZoom: 0.01,dblClickZoomEnabled: false,controlIconsEnabled: false,zoomScaleSensitivity: 1,});}//获取svg字符串（读取本地svg文件）async function getSvgStr(svgPath) {return fetch(svgPath).then((response) => response.text()).catch((error) => {console.error("读取svg文件失败:", error);});}</script>
</html>