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

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

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

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

您可以通过ref节点的this.svgStr = this.$refs.referenceSVG.outerHTML 属性来访问ref节点的HTML表示形式：

int x = 4;
long y = x * 4 - x++;