Vue使用svg-pan-zoom

最新推荐文章于 2024-05-11 10:57:12 发布

bian2021

最新推荐文章于 2024-05-11 10:57:12 发布

阅读量2.9k

点赞数

文章标签： javascript html vue.js

本文链接：https://blog.csdn.net/bian2021/article/details/118752902

版权

按照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
        });