是否有可能获得不是内联SVG的SVG图像的dataUrl(或简单的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,0,0,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");
这里有关于取回的信息:https://www.w3schools.com/js/js_api_fetch.asp