Snap.js - 如何将属性设置为已加载的 svg

Question

我在这里创建了一个简单的 snapjs 示例 https://plnkr.co/edit/CyeVHuuuWrTAy1yKsp4d?p=preview

这是我的脚本 - 我正在加载一个 svg，我想把它涂成绿色。令人惊讶的是，不是 svg 是彩色的，而是我绘制的 "bigCircle"。

$(document).ready(function() {
  var s = Snap("#svg");
  var bigCircle = s.circle(150, 150, 100);
  Snap.load("world.svg", function (f) {
      var world = s.append(f);
      world.attr({
        fill: "#bada55",
      });
      bigCircle.drag();
      world.drag();
  });
})

感谢您的帮助！

Answer 1

你需要 select 放置后的世界。您正在尝试使用：

var world = s.append(f)

但这并不是 return 构成世界的道路。它 return 是整个 svg。我会先添加世界，然后再添加 select。我通过添加这一行来修复它：

world=s.select('[id="layer1"]')

我在你的 svg 中看到整个世界都在那个 id 下。 selected 后，您可以按需要应用 color/drag。这是 plunker：https://plnkr.co/edit/t4JmZMz4JPJ0dDb95aQc?p=preview

Snap.js - 如何将属性设置为已加载的 svg

Snap.js - how to set attribute to loaded svg

javascript

svg

snap.svg