vue 加载网络svg矢量图

最新推荐文章于 2024-08-02 18:14:15 发布

FC-1 枭龙

最新推荐文章于 2024-08-02 18:14:15 发布

阅读量1.1k

点赞数

文章标签： Vue D3.js SVG 网络图像渲染

本文链接：https://blog.csdn.net/weixin_43828014/article/details/124734578

版权

svg网络图片用img标签是不能直接显示出来的，本地的svg就可以，那么网络的svg怎么加载显示呢，

vue项目里面安装 d3这个插件

我这里用的d3插件版本是 "d3": "^7.4.4",

npm install d3

在页面里面引入，比如我写的一个svg图片的渲染器

<template>
  <div>
    <div id="svgContaner"></div>
  </div>
</template>
<script>
import * as d3 from "d3";
export default {
  name: "svgrender",
  props: {
    url: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      dialogVisible: false,
      svg: {}
    };
  },
  async created() {
    console.log(this.url);
    //this.url 是网络svg的路径
    this.svg = (await d3.xml(this.url)).documentElement;
    //console.log(this.svg, "===_svg===");
    document.getElementById("svgContaner").append(this.svg);
  }
};
</script>
<style lang="scss" scoped>
#svgContaner {
  height: calc(100vh - 312px - 80px);
  width: calc(100% - 100px - 20px);
  float: left;
  padding-bottom: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>

这样就可以显示网络的svg图片到vue的页面上了