CSS를 사용하여 SVG 이미지의 색상을 변경하는 방법 (jQuery SVG 이미지 대체)

질문 : CSS를 사용하여 SVG 이미지의 색상을 변경하는 방법 (jQuery SVG 이미지 대체)?

---

이것은 내가 생각해 낸 편리한 코드 조각에 대한 자체 Q & A입니다.

현재 SVG 이미지를 삽입 한 다음 CSS를 통해 SVG 요소에 액세스하는 쉬운 방법은 없습니다. JS SVG 프레임 워크를 사용하는 방법에는 여러 가지가 있지만 롤오버 상태의 간단한 아이콘을 만드는 것이라면 지나치게 복잡합니다.

그래서 여기에 제가 생각해 낸 것이 있는데, 웹 사이트에서 SVG 파일을 사용하는 가장 쉬운 방법이라고 생각합니다. 초기 텍스트에서 이미지로의 대체 방법에서 개념을 가져 왔지만 내가 아는 한 SVG에 대해 수행 된 적이 없습니다.

이것이 질문입니다.

답변

---

먼저, HTML에서 IMG 태그를 사용하여 SVG 그래픽을 포함합니다. 그래픽을 만들기 위해 Adobe Illustrator를 사용했습니다.

<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>

이것은 일반 이미지를 삽입하는 것과 같습니다. svg 클래스를 갖도록 IMG를 설정해야합니다. 'social-link'클래스는 단지 예시를위한 것입니다. ID는 필수는 아니지만 유용합니다.

그런 다음이 jQuery 코드를 사용하십시오 (별도의 파일 또는 HEAD의 인라인).

    /**
     * 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'클래스가있는 모든 IMG를 찾고 링크 된 파일의 인라인 SVG로 대체하는 것입니다. 가장 큰 장점은 CSS를 사용하여 SVG의 색상을 변경할 수 있다는 것입니다.

svg:hover path {
    fill: red;
}

내가 작성한 jQuery 코드는 원본 이미지 ID와 클래스를 포팅합니다. 따라서이 CSS도 작동합니다.

#facebook-logo:hover path {
    fill: red;
}

또는:

.social-link:hover path {
    fill: red;
}

여기에서 작동하는 예제를 볼 수 있습니다 : http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html

여기에 캐싱을 포함하는 더 복잡한 버전이 있습니다 : https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

출처 : https://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement