dom-to-image库不适用于svg图像

Question

我在div中有一个SVG图像元素，我想转换为png。所以我使用dom映像库的toPng函数，并将div元素传递给它。但我得到一个空白图像作为输出。

下面是div的样子：

<div id="element">
<svg height="103" version="1.1" width="103" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
style="overflow: hidden; position: relative; left: -0.328125px;" viewBox="0 0 103 103" preserveAspectRatio="xMidYMid meet">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.2.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"/>
<image x="1.5" y="38.41666666666667" width="100" height="26.166666666666664" preserveAspectRatio="none" 
href="https://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"/>
</svg> 
</div>

下面是我尝试获取dom图像的代码：

domtoimage.toPng(node).then((dataUrl)=> {

var img = new Image();

img.onload = () => {
                    _view.localScreenshotSource = img.src;
                    observer.next(img.src);
                };
img.src = dataUrl;
})

与svg文本类似的代码可以很好地工作。

我做错了什么吗？

谢谢

Answer 1

您在HTML中使用了错误的标记，请将图像更改为img，然后重试