vue 使用d3.js加载 svg 并将svg转为file格式上传

hjs_xxq

于 2022-09-07 20:01:43 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hjs_xxq/article/details/126498921

版权

本文介绍了如何在Vue项目中利用d3.js库加载SVG文件，并将其转换为FILE格式以便上传。首先，将SVG元素放置在项目的public目录下，然后在指定的div中加载SVG。接着，导入d3.js并执行SVG到FILE的转换，这个过程涉及到自定义的辅助函数dataURLtoFile，该函数可以根据项目需求进行定制。

摘要由CSDN通过智能技术生成

1、将svg元素放入public下可自定义一个文件夹用来放svg

如图：

2、将要加载的svg放入指定的div

3、加载svg文件 import * as d3 from 'd3'

svgInit() {

      let that = this

      

      let iconFolder = '/svg/'

      let containerDivId = '#removableDentureSvg'

      let targetSrc = iconFolder + 'remote.svg' 

      // console.log(targetSrc, 'targetSrc')

      d3.xml(targetSrc).then((data) => {