Snap.svgグラフィックのID属性を設定する

Question

私はSnap.svg APIを使用しています。スタイリングの目的でCSSで3つのグラフィックを選択する必要があります。したがって、それらを区別するために、私は彼らにIDまたはクラス名を与える必要があります。

<svg height="75" version="1.1" width="100" xmlns="http://www.w3.org/2000/svg"> 
    <polyline points="0,0,50,75,100,0,0,0" style="" fill="#000000"></polyline> 
</svg> 

これは私がする結果を必要とするものである：

var draw = Snap(100, 75); 
c = draw.polyline(0,0, 50,75, 100,0, 0,0); 
c.attr({ 
    fill: "black" 
}); 

これは私が得る結果は次のとおりです。

は、これは私が要素を作成する方法です

<svg id="graphic_1" height="75" version="1.1" width="100" xmlns="http://www.w3.org/2000/svg"> 
    <polyline points="0,0,50,75,100,0,0,0" style="" fill="#000000"></polyline> 
</svg>

Answer 1

更新

GitHubで問題が発生しましたが、これはfixed in the next releaseのようです。今のところ、開発ブランチに、あなたはElement.attrを使用することができます。

var draw = Snap(100, 75); 
draw.attr({ id: 'graphic_1' }); 

を私はので下のオリジナルの答えを残している：（

1. を書いている時点で、これはマスターでは動作しません。リリース）バージョン。
2. 基礎となるDOMノードに直接アクセスするために説明されている手法は、今後、他の人やSnap.svgの古いバージョンを使用している人にとっては役に立ちます。

---

それは文書化されますが、内部的にSnap.svgはnodeと呼ばれるプロパティにDOMノードを格納していません。したがって、あなたはそうのようなキャンバスのIDを設定することができます。

また

draw.node.id = 'graphic_1'; 

、あなたが文書化されていない技術を避けることを好むならば、あなたは最初をしたいIDを持つ要素を作成し、直接それを使用できます。スナップバージョン0.2.0で

<svg id="graphic_1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="75"></svg> 

var draw = Snap("#graphic_1"); 

Answer 2

.attr()方法が期待さ、

として動作します

var draw = Snap(100, 75); 
draw.attr({id: "graphic_1"}); 

スナップバージョン0.1.0私は変更しましたsnap.svg.js（約。 4338行）、これを有効にします。

var availableAttributes = { 
    svg: { 
     id : "",  
    },