Vue.js 将 svg $ref 元素转换为 dataURL答案

【问题标题】：Vue.js convert svg $ref element to dataURLVue.js 将 svg $ref 元素转换为 dataURL
【发布时间】：2019-08-05 20:32:30
【问题描述】：

在 vue.js 中，我尝试使用 npm 包 svg-to-dataurl 将 svg 元素转换为 dataURL

我正在使用 $refs 来获取元素，

<svg ref="referenceSVG" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
                </svg>

我单击一个按钮，该按钮调用一个获取引用元素的方法。

refSVG(){
        this.svgStr = this.$refs.referenceSVG
        ......
    }

接下来我记录这个变量，它是字符串类型的，

console.log(this.svgStr);//is an object

如果我将 this.svgStr 传递给函数 svgToDataUrl(this.svgStr)，则 dataURL 没有正确创建并给出，

另一方面，如果我像这样直接将元素作为字符串传入，

this.dataUrl = svgToDataURL('<svg ref="referenceSVG" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>')

这给出了一个可以使用的dataURL，

data:image/svg+xml,%3Csvg%20ref%3D%22referenceSVG%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22red%22%20%2F%3E%3C%2Fsvg%3E

所以看来原点svgStr需要转成字符串。为此，我使用了，

this.toString = this.svgStr.toString()

并记录下来，结果，

[object SVGSVGElement]

这不是我期望的完整元素，因此在 svgToDataUrl() 中没有用处。

如何将元素放入 svgToDataUrl() 函数以转换为 dataURL？

我也不确定我应该谈论 dataUri 还是 dataUrl？

任何帮助将不胜感激。

谢谢，

【问题讨论】：

标签： svg vuejs2 vue-cli data-uri

【解决方案1】：

您的变量不是字符串类型，而是对象类型。因此，如果您在其上调用 toString()，它将返回该对象的字符串表示形式，而不是您要查找的 SVG 内容。

您可以通过其outerHTML 属性访问引用节点的 HTML 表示：

this.svgStr = this.$refs.referenceSVG.outerHTML

【讨论】：

太棒了，就是这样。非常感谢您的回答。我知道有一个innerHTML，但不知道有一个outerHTML。完美运行。