스냅 SVG로드 기능에서 jQuery 사용

Question

그래서이 문제가 있습니다. Snap 라이브러리가있는 페이지를 만들고 싶습니다. 그러나 저는 f.e를 제외한 모든 요소를 ​​선택할 수있는 방법을 찾지 못했습니다. 맴돌다. JQuery와는이 물건에 대한 좋은해야하지만, 나는 SVG 스냅 부하 기능에서 실행하는 방법을 모른다 :/내 코드는 다음과 같습니다

는 fin.svg 외부 SVG 파일이

<script> 
var s = Snap("#svg"); 
Snap.load("fin.svg",onSVGLoaded); 

function onSVGLoaded(d){ 
    var all = d.selectAll(".plasmid"); 
    s.append(all); 
    var mono = s.select("#mono"); 
    mono.drag(); 

$(mono).click(function(){ 
    $(this).fadeOut("slow"); 
    }); 
}; 
</script> 

, .plasmid입니다 그래픽 및 모노의 모든 부분을 포함하는 svg 파일의 클래스는 그래픽의 한 부분입니다. mono.drag() 부분은 작동하지만 jQuery는 작동하지 않습니다. 도울 수 있니?

Answer 1

이있는 경우 :

<object class="someselector" data="external.svg"></object> 

당신이 사용할 수있는 jQuery를 :

iframe을 및 SVG를 들어

<script> 
$(window).load(function(){ 
    var a = ($(".someselector").contents().find('svg'))[0]; 
    var s = Snap(a); 
    var something = s.someSnapfunctions(); 
    }); 
</script> 

, 항상 $ (창) .load 및 내용()

---

를 사용

그리고 $ (window) .load와 같은 jQuery 함수를 사용할 수 있습니다 :

$('.someselector').load(function(){ 
// do something 

var b = ($(".someselector").contents().find('svg').find('anotherselector')); 
b.each(function(){ 
    Snap($(this)[0]).attr({ 
     fill: "#bada55" // change color! 
    }); 
});