Snap.jsは - ロードされたSVG

Question

に属性を設定する方法を私はここhttps://plnkr.co/edit/CyeVHuuuWrTAy1yKsp4d?p=preview

作成したシンプルなsnapjsサンプルを持っている。これは私のスクリプトである - 私は、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

あなたはそれを置いた後で世界を選択する必要があります。

var world = s.append(f) 

しかし、これは世界を構成するパスを返しません。それはsvg全体を返します。私はまず世界を加えてそれを選ぶだろう。私はこの行を追加してそれを修正した：

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

私は世界がすべてあなたのsvgのそのidの下にグループ化されているのを見た。それが選択されると、あなたは好きなようにカラー/ドラッグを適用することができます。ここには、プランカがあります：https://plnkr.co/edit/t4JmZMz4JPJ0dDb95aQc?p=preview