如何解决您可以在同一域中获取外部 SVG 图像的 dataUrl 吗？
是否可以获得 SVG 图像的 dataUrl（或简单的 SVG 源代码），该图像不是内联 SVG，而是同一域中的外部 SVG 文件？
我查看了 https://github.com/sampumon/SVG.toDataURL，但它仅适用于内联 SVG，不适用于外部 SVG 文件。
明确地说，我不打算将 SVG 图像转换为 PNG，然后获取 PNG 的 dataUrl，我需要获取实际的 SVG 代码。
解决方案需要是开源的，并且可以在大多数现代浏览器中运行。
这是我正在尝试做的最小版本：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getSvgDataUrl(imgID) {
// FIXME!!!
return dataUrl;
}
function doTheThing() {
result = getSvgDataUrl('foo');
console.write(result);
}
</script>
</head>
<body onload='doTheThing()'>
<img src='myImage.svg' id='foo'>
</body>
</html>
我认为这里要做的显而易见的事情是将 SVG 图像放在画布上，然后从画布中获取 dataURL，如下所示：
source = new Image();
source.src = 'myImage.svg';
source.onload = function(event){
c = document.getElementById('canvas');
ctx = c.getContext('2d');
ctx.drawImage(source,116,23);
data = c.toDataURL('image/svg',1.0);
alert(data);
};
但这给了我一个 PNG dataURL，而不是 SVG。
我还查看了 XMLSerializer，它看起来很有前途，但我不知道如何获取内部 SVG。这样做：
svgImg = document.getElementById('foo');
s = new XMLSerializer();
console.log(s.serializetoString(svgImg));
只需给出以下控制台输出：
<img xmlns="http://www.w3.org/1999/xhtml" src="myImage.svg" id="foo" />
解决方法
Justin Taddei 给出了答案：它是 fetch。我觉得我不知道这一点很愚蠢，但另一方面，我敢打赌，我不是唯一对此感到困惑的人，所以这是有效的代码：
async function getText(file) {
let x = await fetch(file);
let y = await x.text();
console.log(y);
}
getText("myImage.svg");
这里有关于 fetch 的信息：https://www.w3schools.com/js/js_api_fetch.asp
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
