微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我正在使用 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”,我无法从字符串中删除它。

>

enter image description here

解决方法

如果这是您的代码;问题是:

您正在将文本塞入仅接受 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);

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。