svgjs - 加载外部 svg 文件

【问题标题】：svgjs - load external svg filesvgjs - 加载外部 svg 文件
【发布时间】：2014-10-09 17:01:44
【问题描述】：

我想加载一个外部 SVG 文件，我尝试了 svg.import.js 插件的演示。

我需要加载这样的文件，但我无法修改它们。

这里有什么问题？

马格纳斯

【问题讨论】：

我认为它不喜欢inkscape 默认放入的额外inkscape 位。如果您无法修改文件，那么您将被卡住，因为它们需要由 inkscape 保存为原始 SVG。
我已经测试过将其保存为纯 svg，但它仍然无法正常工作。此外，在inkscape svg 版本中只有几个以“inkscape:”开头的附加标签。这似乎是 svg.import.js 的一个弱点。 Snap.svg 可以毫无问题地加载原始文件。

【解决方案1】：

svg.import.js 插件在 SVG.js v2 及更高版本中已过时，如下所述：

这现在内置于 draw.svg() 方法中。这是文档中的一个示例：

但是，您需要加载 SVG 数据，而不是 url。但是，您可以使用 ajax 加载外部文件并将文件的内容传递给 SVG.js 实例。比如：

var ajax = new XMLHttpRequest()
ajax.open('GET', 'your/file.svg', true)
ajax.send()
ajax.onload = function(e) {
  draw.svg(ajax.responseText)
}

注意：如果您从 Inkscape 加载文件，使用普通 SVG 格式会更安全。

【讨论】：