svg - 如何使用这个 UTF-8 SVG 字符串来获取?

Question

我正在使用domtoimage尝试将我的 html div 转换为<svg>. domtoimage 中的函数返回字符串：
data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="288" height="1920"> .......... </svg>

我可以将此字符串设置为src的<img>，但我正在使用的其他插件（jsPDF）不能使用它，它需要<svg>.

我想我可以去掉开头部分，只将svg标签添加到文档中，但这会导致一个非常奇怪的 svg，到处都是“%0A”，我无法从字符串中删除它。

标签： svgutf-8dom-to-image

Answer 1

如果这是您的代码；问题是：

您正在将文本填充到仅接受 DOM 节点的append 函数中。

仅.innerHTML将字符串转换为 HTML

如果你给append函数一个字符串..它将显示为一个字符串。

https://developer.mozilla.org/en-US/docs/Web/API/Element/append

请注意文档：DOMString 对象作为等效的 Text 节点插入。

解决方案是创建一个 SVG DOM 元素

let svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElem.innerHTML = mySvg;
$('body').append(svgElem);