将外部SVG文件加载到变量中并添加到HTML

Question

我试图用SVG图片替换IMG标签中嵌入的内容，并将其作为内联输出。换句话说，加载给定IMG SRC属性的SVG文件的内容到变量中，并将其注入HTML中作为内联SVG，如下所示：

...

else if (type && type === 'img-simple') {
    if (format === 'svg' ) {
         $.get(src, function(data) {
         var svg = $(data);
         $bg.append(svg);
    });

} else {

...

其中，变量类型为图像类，格式为图像类型：jpg、sag等。

这会导致以下错误：

[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (img01.svg, line 0)
[Error] XMLHttpRequest cannot load file:///Users/img01.svg. Origin null is not allowed by Access-Control-Allow-Origin. (index.html, line 0)

显然是 get 函数的问题吗？

提前致谢。

- jewels

---

有没有其他方法将sag文件的内容加载到jQuery变量中（以便将其附加到html）？ - jewels

SVG文件不在您的服务器上，这种情况有可能发生吗？ - fr00t

我正在本地文件夹中测试它（而不是服务器版本）... - jewels

啊，抱歉我没看到src可能是“file:///Users/img01.svg”。这样行不通。另外，你有运行Web服务器吗？ - fr00t

Answer 1

使用file://协议无法通过ajax加载数据。您需要使用http://。

例如，将svg文件移动到与您的javascript文件相同的文件夹中，然后执行以下操作：

$.get('img01.svg', function(data) {
    $bg.append(data);
});

- fr00t