关于在vue中引用svg大型文件的方法之一 以及svg图片鼠标拖动，放大缩小等

一、直接将svg文件的代码复制

直接复制svg代码带要使用的vue组件中

二、通过html文件引入

html文件通过object等引入 html和svg文件放在static中

html引入svg

<object  data="./ms.svg" id="em" type="image/svg+xml" onload="zoom(this)"></object>   

vue组件引入html

<iframe  src="../../../static/svg/svg.html" scrolling="no" name="iframe" ></iframe>``

通过一下方法，找到svg，通过svg，找到svg中的元素

   window.onload = function () {
  var embedEle=document.getElementById("em");
  var svg=embedEle.getSVGDocument();
  var svgdoc=svg.documentElement;
  svgdoc.style.cursor="pointer"
  //找svg中的元素
  var line53=svgdoc.querySelector("#line53");
  line53.onclick=function(e){
    
        let clientX=e.clientX
        let clientY=e.clientY
        //html向vue传值
        window.parent.postMessage({
                                  data :"51$"+clientX+"$"+clientY//主变1
                                },'*');

    }
  }

找到元素后就可以添加鼠标事件了，可以更改svg元素的形状颜色位置

vue组件接值
 mounted() {
    window.addEventListener('message', async function(e){//接受子组件html页面值
    e.data.data 就是传过来的值
    }
    }

svg拖动放大缩小

svg-pan-zoom.js这个插件 要在除id为svg的最外层加上一个 id为layer1的元素包裹整个svg代码

<script type="text/javascript">
  function zoom(obj) {
      // 此处获取的元素Id是SVG文件中的<g>标签的id值
      $(obj.getSVGDocument().getElementById('layer1')).show();
      svgPanZoom(obj, {
          zoomEnabled: true,         //开启缩放功能
          controlIconsEnabled: true  //开启右下角缩放控件功能
      });
  }
  $('object').attr('onload', 'zoom(this)');
</script>