javascript - 在 javascript 中预加载 SVG

Question

我知道 javascript 可以在输出之前使用 Image() 对象来准备图像，但是我需要 SVG 的相同功能。我不想将它加载到“img”标签中，而是在 javascript 中构建 SVG 标记并确保在将 src 文件转储到屏幕之前加载它们。有谁知道这是否可能以及如何实现？

谢谢。

Answer 1

只需通过通常的 AJAX-GET 请求检索您的 SVG 文件，并在此请求成功时插入代码。

$.get( 'path/to/your/svg/file.svg', function(data) {
  $('#svgContainer').html( data );
});

Answer 2

您可以创建一个 <iframe>，为 iframe 上的“加载”添加一个事件侦听器，然后将 iframe 的 src 设置为您要加载的 svg。

例如：

var iframe = document.createElement("iframe");
iframe.addEventListener('load', function() {
  ... svg now loaded, do something ...
});
iframe.src = "your.svg";

如果您希望可以将元素导入到主文档中，只需注意在尝试附加它们之前您需要将节点导入或采用到主文档中。

像 Sirko 建议的那样使用 XmlHttpRequest 可能更自然。

Answer 3

你可以使用createElementNS()：

var img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttributeNS(null,'height','536');
img.setAttributeNS(null,'width','536');
img.setAttributeNS('http://www.w3.org/1999/xlink','href','https://upload.wikimedia.org/wikipedia/commons/2/22/SVG_Simple_Logo.svg');
img.setAttributeNS(null,'x','10');
img.setAttributeNS(null,'y','10');
img.setAttributeNS(null, 'visibility', 'visible');
$('svg').append(img);