Vue使用svg-pan-zoom

最新推荐文章于 2025-03-07 06:00:00 发布

原创最新推荐文章于 2025-03-07 06:00:00 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #vue.js

该博客介绍了在Vue单页应用中，由于object和embed标签无法获取SVG内容，导致无法使用svg-pan-zoom库的问题。作者提供了一种解决方案，即通过服务端返回SVG的XML字符串，然后在客户端直接加载并应用svg-pan-zoom进行缩放和平移操作。示例代码展示了如何设置SVG属性并初始化svg-pan-zoom插件。

按照svg-pan-zoom文档，在vue（单页模式）中是无法通过object或者embed动态加载svg文件的，主要是vue中object或者embed 无法获取contentDocument或getSVGDocument。

可能有其他方法，暂未发现。

我这里采用粗暴的办法，就是服务端直接输出svg的xml字符串，客户端直接加载svg的xml字符串的方法

示例代码如下：

      document.getElementById("svg_container").innerHTML = res;//res为从服务器获取的xml字符串
      document.getElementsByTagName('svg')[0].setAttribute('id','svg-triger')
      document.getElementsByTagName('svg')[0].setAttribute('width','100%')
      document.getElementsByTagName('svg')[0].setAttribute('height','100%')
      svgPanZoom('#svg-triger', {
          zoomEnabled: true,
          fit: true,
          controlIconsEnabled: true,
          contain:true
        });