javascriptを使用して別のコンテナにsvg要素を描画する

Question

2つのsvgコンテナがあり、両方のコンテナに異なるsvg要素を描画します。私たちは、としましょう：

<div><svg height="100" width="100" id="svg1" class="svg"> </svg></div> 
<div><svg height="100" width="100" id="svg2" class="svg"> </svg></div> 

は今、私は第一1およびJavaScriptとsnap.svgのidを使用して第二1の行で四角形を描画するとします。どうすればそれを達成できますか？

Answer 1

snapsvg.ioのGetting Started and Documentationの部分を読むと、簡単な作業になるはずです。

var s1 = Snap("#svg1"); 
    s1.rect(50, 50, 50, 50); 

    var s2 = Snap("#svg2"); 
    var line = s2.line(50, 50, 100, 100); 
    line.attr({ 
    stroke: "#000", 
    strokeWidth: 5, 
    strokeLinecap:"round" 
    }); 

Answer 2

私はちょっと少しだけjsfiddleといくつかの説明で@ctronの応答を強化しました。

var s1 = Snap("#svg1") 
, s2 = Snap("#svg2") 
// Create rect and save in a variable 
, rect = s1.rect(50, 50, 50, 50) 
// Create line and save in a variable 
, line = s2.line(50, 50, 100, 100); 

rect.attr({fill:"red"}) 

line.attr({ 
    stroke: "#0f0", 
    strokeWidth: 5, 
    strokeLinecap:"round" 
    }); 

JSFiddle