skrollr로 SVG의 색상을 변경하는 방법 jQuery 플러그인

Question

내 웹 사이트의 로고가 SVG입니다. , https://github.com/Prinzhorn/skrollr/tree/master/examples : 나는 jQuery 플러그인의 skrollr와 함께 사용하는 것이 가능하다, CSS로 색상을 변경할 수 있습니다 이제

/* 
    * Replace all SVG images with inline SVG 
    */ 
     jQuery('img.svg').each(function(){ 
      var $img = jQuery(this); 
      var imgID = $img.attr('id'); 
      var imgClass = $img.attr('class'); 
      var imgURL = $img.attr('src'); 

      jQuery.get(imgURL, function(data) { 
       // Get the SVG tag, ignore the rest 
       var $svg = jQuery(data).find('svg'); 

       // Add replaced image's ID to the new SVG 
       if(typeof imgID !== 'undefined') { 
        $svg = $svg.attr('id', imgID); 
       } 
       // Add replaced image's classes to the new SVG 
       if(typeof imgClass !== 'undefined') { 
        $svg = $svg.attr('class', imgClass+' replaced-svg'); 
       } 

       // Remove any invalid XML tags as per http://validator.w3.org 
       $svg = $svg.removeAttr('xmlns:a'); 

       // Replace image with new SVG 
       $img.replaceWith($svg); 

      }, 'xml'); 

     }); 

:

나는 편집 내 인라인 SVG 로고를 만드는 일부 자바 스크립트를 발견했다 아래로 스크롤 할 때 로고의 색상을 변경할 수 있습니까?

나는 SVG에이를 추가하려고했지만 그것은 작동하지 않았다 data-0="fill:rgb(255,0,0);" data-500="fill:rgb(0,0,255);"

아래는 그것을위한 바이올린입니다.

http://jsfiddle.net/NEhmK/1/

Answer 1

은 어디에서 data-0="fill:rgb(255,0,0);" data-100="fill:rgb(0,0,255);" 속성을 추가? 당신은 예를 들어, 다른 곳을 추가하면 내가 즉 모든 <path> 요소

<path data-0="fill:rgb(255,0,0);" data-100="fill:rgb(0,0,255);" fill="#6EC5CB"... 

을 추가하면 나를 위해 작동하는 것 같다 CSS 또는 <g> 라이브러리가 경로에 이미있는 채우기를 재정의한다고 생각하지 않습니다.

속성을 경로 태그에 추가하려면 document.rootElement.getElementsByTagName("path")을 호출하고 결과를 반복하십시오. 예 :

var paths = document.documentElement.getElementsByTagName("path"); 
for (var i = 0; i < paths.length; i++) { 
    paths[i].setAttribute("data-0", "fill:rgb(255,0,0);"); 
    paths[i].setAttribute("data-100", "fill:rgb(0,0,255);"); 
} 

또는 경로에서 기존의 채우기 속성을 모두 제거하십시오.