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 일에 사각형과 자바 스크립트와 snap.svg의 ID를 사용하여 2 일에 선을 그어야한다고 가정합니다. 나는 그것을 어떻게 성취 할 수 있는가?

Answer 1

snapsvg.io의 시작 및 문서 부분을 읽고 간단한 작업을 수행해야합니다.

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