使用 Snap.svg 导入 SVG 不显示渐变

Question

我正在尝试使用 Snap.svg 通过 Snap.svg load 函数导入现有的 SVG。然而，它起作用了，原始 SVG 文件中的任何渐变都被删除，它们的区域只是简单地填充为白色。这是预期的行为，还是我遗漏了什么？

注意 - SVG 是在 Inkscape 中创建的。如果使用 <embed> 或 <object>.

则显示正确

当我使用<embed src="robot.svg"/>时，它显示正常，像这样 http://postimg.org/image/pwe9zute3/

然而，当我使用

<script>
  var s = Snap("24in","12in");
  Snap.load("robot.svg", function (f) {
      var g = f.select("g");
      s.append(g);
  });          
</script>

它像这样加载 http://postimg.org/image/5u0woiw7n/

下面是 link 下载 SVG，如果有人想检查的话。

https://www.dropbox.com/s/bdtujg1vr2dp6f4/robot.svg?dl=0

有趣的注意事项 - 在 dropbox 站点上显示为预览时，它也没有渐变。但是，从 Dropbox 下载 SVG 并在浏览器中查看，它有渐变。

Answer 1

您没有将渐变定义附加到 snap 中，只是绘图中 <g> 元素的内容和渐变在 <defs> 元素下。

使用 Snap.svg 导入 SVG 不显示渐变

Importing SVG with Snap.svg doesn't display gradients

javascript

svg

snap.svg