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

Question

在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
        ......
    }

接下来我记录这个变量，它是string类型，

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？

任何帮助将不胜感激。

谢谢，

Answer 1

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

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

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