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

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

현재 SVG 이미지를 포함하고 CSS를 통해 SVG 요소에 액세스하는 쉬운 방법은 없습니다. JS SVG 프레임 워크를 사용하는 방법에는 여러 가지가 있지만 롤오버 상태의 간단한 아이콘을 만드는 것만으로는 너무 복잡합니다.

그래서 내가 생각해 낸 것은 웹 사이트에서 SVG 파일을 사용하는 가장 쉬운 방법이라고 생각합니다. 초기 텍스트를 이미지로 대체하는 방법에서 개념을 취하지 만 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

스타일

svg path {
    fill: #000;
}

스크립트

$(document).ready(function() {
    $('img[src$=".svg"]').each(function() {
        var $img = jQuery(this);
        var imgURL = $img.attr('src');
        var attributes = $img.prop("attributes");

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

            // Remove any invalid XML tags
            $svg = $svg.removeAttr('xmlns:a');

            // Loop through IMG attributes and apply on SVG
            $.each(attributes, function() {
                $svg.attr(this.name, this.value);
            });

            // Replace IMG with SVG
            $img.replaceWith($svg);
        }, 'xml');
    });
});

이제 대부분의 최신 브라우저 에서 IE11이 아닌 Edge를 포함 하여 CSS filter속성 을 사용할 수 있습니다 . SVG 이미지뿐만 아니라 다른 요소에서도 작동합니다. 다른 색상을 독립적으로 수정할 수는 없지만 색상을 사용 하거나 수정할 수 있습니다 . 다음 CSS 클래스를 사용하여 아이콘의 "비활성화 된"버전을 표시합니다 (원본은 채도가 높은 SVG 그림).hue-rotateinvert

.disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

대부분의 브라우저에서 밝은 회색으로 표시됩니다. IE (그리고 아마도 테스트하지 않은 Opera Mini)에서는 불투명 속성에 의해 눈에 띄게 희미 해집니다. 회색이 아니지만 여전히 꽤 좋아 보입니다.

다음은 Twemoji 벨 아이콘에 대한 네 가지 CSS 클래스 인 원본 (노란색), 위의 "비활성화 된"클래스 hue-rotate(녹색) 및 invert(파란색)의 예입니다.

.twa-bell {
  background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em;
}
.grey-out {
  opacity: 0.4;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.hue-rotate {
  filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
}
.invert {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <span class="twa-bell"></span>
  <span class="twa-bell grey-out"></span>
  <span class="twa-bell hue-rotate"></span>
  <span class="twa-bell invert"></span>
</body>

</html>

또는 당신은 CSS를 사용할 수 mask, 부여 브라우저 지원이 잘되지 않습니다하지만 당신은 대체를 사용할 수 있습니다

.frame {
    background: blue;
    -webkit-mask: url(image.svg) center / contain no-repeat;
}

페이지에 파일을 포함시킬 수 있으면 (PHP 포함 또는 선택한 CMS를 통해 포함) SVG 코드를 추가하여 페이지에 포함 할 수 있습니다. 이것은 SVG 소스를 페이지에 붙여 넣는 것과 동일하게 작동하지만 페이지 마크 업을 더 깨끗하게 만듭니다.

이점은 자바 스크립트가 필요없는 CSS를 통해 SVG의 일부를 대상으로 지정할 수 있다는 것입니다.

http://codepen.io/chriscoyier/pen/evcBu

다음과 같은 CSS 규칙을 사용해야합니다.

#pathidorclass:hover { fill: #303 !important; }

!important채우기 색상을 무시 하려면 비트가 필요합니다.

@Drew Baker는이 문제를 해결하기위한 훌륭한 솔루션을 제공했습니다. 코드가 제대로 작동합니다. 그러나 AngularJ를 사용하는 사람들은 jQuery에 많은 의존성을 찾을 수 있습니다. 따라서 @Drew Baker의 솔루션을 따르는 코드 인 AngularJS 사용자에게 붙여 넣는 것이 좋습니다.

동일한 코드의 AngularJs 방식

1. HTML : html 파일에 다음 태그를 사용하십시오.

<svg-image src="/icons/my.svg" class="any-class-you-wish"></svg-image>

2. 지시문 : 이것은 태그를 인식해야하는 지시문입니다.

'use strict';
angular.module('myApp')
  .directive('svgImage', ['$http', function($http) {
    return {
      restrict: 'E',
      link: function(scope, element) {
        var imgURL = element.attr('src');
        // if you want to use ng-include, then
        // instead of the above line write the bellow:
        // var imgURL = element.attr('ng-include');
        var request = $http.get(
          imgURL,
          {'Content-Type': 'application/xml'}
        );

        scope.manipulateImgNode = function(data, elem){
          var $svg = angular.element(data)[4];
          var imgClass = elem.attr('class');
          if(typeof(imgClass) !== 'undefined') {
            var classes = imgClass.split(' ');
            for(var i = 0; i < classes.length; ++i){
              $svg.classList.add(classes[i]);
            }
          }
          $svg.removeAttribute('xmlns:a');
          return $svg;
        };

        request.success(function(data){
          element.replaceWith(scope.manipulateImgNode(data, element));
        });
      }
    };
  }]);

3. CSS :

.any-class-you-wish{
    border: 1px solid red;
    height: 300px;
    width:  120px
}

4. 카르마 재스민으로 단위 테스트 :

'use strict';

describe('Directive: svgImage', function() {

  var $rootScope, $compile, element, scope, $httpBackend, apiUrl, data;

  beforeEach(function() {
    module('myApp');

    inject(function($injector) {
      $rootScope = $injector.get('$rootScope');
      $compile = $injector.get('$compile');
      $httpBackend = $injector.get('$httpBackend');
      apiUrl = $injector.get('apiUrl');
    });

    scope = $rootScope.$new();
    element = angular.element('<svg-image src="/icons/icon-man.svg" class="svg"></svg-image>');
    element = $compile(element)(scope);

    spyOn(scope, 'manipulateImgNode').andCallThrough();
    $httpBackend.whenGET(apiUrl + 'me').respond(200, {});

    data = '<?xml version="1.0" encoding="utf-8"?>' +
      '<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->' +
      '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' +
      '<!-- Obj -->' +
      '<!-- Obj -->' +
      '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"' +
      'width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">' +
        '<g>' +
          '<path fill="#F4A902" d=""/>' +
          '<path fill="#F4A902" d=""/>' +
        '</g>' +
      '</svg>';
    $httpBackend.expectGET('/icons/icon-man.svg').respond(200, data);
  });

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('should call manipulateImgNode atleast once', function () {
    $httpBackend.flush();
    expect(scope.manipulateImgNode.callCount).toBe(1);
  });

  it('should return correct result', function () {
    $httpBackend.flush();
    var result = scope.manipulateImgNode(data, element);
    expect(result).toBeDefined();
  });

  it('should define classes', function () {
    $httpBackend.flush();
    var result = scope.manipulateImgNode(data, element);
    var classList = ["svg"];
    expect(result.classList[0]).toBe(classList[0]);
  });
});

CSS를 사용 하여이 작업을 수행하려고한다는 것을 알고 있지만 작고 간단한 이미지 인 경우 알림을 제공합니다. 메모장 ++에서 언제든지 열어서 경로 / 요소의 채우기를 변경할 수 있습니다.

<path style="fill:#010002;" d="M394.854,205.444c9.218-15.461,19.102-30.181,14.258-49.527
    ...
    C412.843,226.163,402.511,211.451,394.854,205.444z"/>

그것은 추악한 스크립트를 저장할 수 있습니다. 기본이 아닌 경우 죄송하지만 때로는 간단한 솔루션을 간과 할 수 있습니다.

... 여러 svg 이미지를 교체 하더라도이 질문의 일부 코드 스 니펫보다 크기가 작을 수 있습니다.

AngularJS 로이 문제를 해결하기위한 지시문을 작성했습니다. 여기서 사용할 수 있습니다 (ngReusableSvg) .

SVG 요소는 렌더링 된 후이를 대체하고 요소 안에 배치 div하여 CSS를 쉽게 변경할 수 있도록합니다. 이것은 크기 / 색이 다른 여러 장소에서 동일한 SVG 파일을 사용하는 데 도움이됩니다.

사용법은 간단합니다.

<object oa-reusable-svg
        data="my_icon.svg"
        type="image/svg+xml"
        class="svg-class"
        height="30"  // given to prevent UI glitches at switch time
        width="30">
</object>

그 후, 당신은 쉽게 가질 수 있습니다 :

.svg-class svg {
    fill: red; // whichever color you want
}

TL / DR : 여기로 이동-> https://codepen.io/sosuke/pen/Pjoqqp

설명:

나는 당신이 다음과 같은 HTML을 가지고 있다고 가정합니다 :

<img src="/img/source.svg" class="myClass">

필터 라우트를 확실히 찾으십시오. 당신의 svg는 대부분 검은 색 또는 흰색입니다. 필터를 적용하여 원하는 색상으로 만들 수 있습니다. 예를 들어 민트 그린을 원하는 검은 색 svg가 있습니다. 먼저 흰색 (기술적으로 모든 RGB 색상)으로 반전시킨 다음 색조 채도 등으로 재생합니다.

filter: invert(86%) sepia(21%) saturate(761%) hue-rotate(92deg) brightness(99%) contrast(107%);

더 좋은 방법은 원하는 16 진수를 필터로 변환하는 도구를 사용할 수 있다는 것입니다. https://codepen.io/sosuke/pen/Pjoqqp

knockout.js허용되는 답변 을 기반으로 한 버전은 다음과 같습니다 .

중요 : 실제로 교체에도 jQuery가 필요하지만 일부는 유용 할 것이라고 생각했습니다.

ko.bindingHandlers.svgConvert =
    {
        'init': function ()
        {
            return { 'controlsDescendantBindings': true };
        },

        'update': function (element, valueAccessor, allBindings, viewModel, bindingContext)
        {
            var $img = $(element);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            $.get(imgURL, function (data)
            {
                // Get the SVG tag, ignore the rest
                var $svg = $(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');

        }
    };

그런 다음 적용하십시오 data-bind="svgConvert: true" img 태그에 하십시오.

이 솔루션은 img태그를 SVG로 완전히 대체하며 추가 바인딩은 고려되지 않습니다.

다음은 프레임 워크 코드가 없으며 순수한 js 만입니다.

document.querySelectorAll('img.svg').forEach(function(element) {
            var imgID = element.getAttribute('id')
            var imgClass = element.getAttribute('class')
            var imgURL = element.getAttribute('src')

            xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var svg = xhr.responseXML.getElementsByTagName('svg')[0];

                    if(imgID != null) {
                         svg.setAttribute('id', imgID);
                    }

                    if(imgClass != null) {
                         svg.setAttribute('class', imgClass + ' replaced-svg');
                    }

                    svg.removeAttribute('xmlns:a')

                    if(!svg.hasAttribute('viewBox') && svg.hasAttribute('height') && svg.hasAttribute('width')) {
                        svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
                    }
                    element.parentElement.replaceChild(svg, element)
                }
            }
            xhr.open('GET', imgURL, true)
            xhr.send(null)
        })

onload속성을 사용 하여 주입을 트리거하는 SVGInject라는 오픈 소스 라이브러리 가 있습니다. GitHub 프로젝트는https://github.com/iconfu/svg-inject

SVGInject를 사용하는 최소한의 예는 다음과 같습니다.

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

이미지가로드 된 후 onload="SVGInject(this)주입이 트리거되고 <img>요소가 src속성에 제공된 SVG 파일의 내용으로 대체됩니다 .

SVG 주입과 관련된 몇 가지 문제를 해결합니다.

1. 주입이 완료 될 때까지 SVG를 숨길 수 있습니다. 로드 시간 동안 스타일이 이미 적용된 경우 중요합니다. 그렇지 않으면 짧은 "스타일이 지정되지 않은 콘텐츠 플래시"가 발생할 수 있습니다.

2. <img>요소 자동 주입 themselved. SVG를 동적으로 추가하면 주입 기능을 다시 호출 할 필요가 없습니다.

3. SVG가 두 번 이상 주입 된 경우 문서에서 동일한 ID를 여러 번 갖지 않도록 SVG의 각 ID에 임의의 문자열이 추가됩니다.

SVGInject는 일반 Javascript이며 SVG를 지원하는 모든 브라우저에서 작동합니다.

면책 조항 : 저는 SVGInject의 공동 저자입니다

우리가 그러한 svg 이미지를 더 많이 가지고 있다면 폰트 파일의 도움을받을 수도 있습니다. https://glyphter.com/
과 같은 사이트는 svgs에서 글꼴 파일을 얻을 수 있습니다.

예 :

@font-face {
    font-family: 'iconFont';
    src: url('iconFont.eot');
}
#target{
    color: white;
    font-size:96px;
    font-family:iconFont;
}

이를 위해 데이터 이미지를 사용할 수 있습니다. data-image (data-URI)를 사용하면 인라인과 같은 SVG에 액세스 할 수 있습니다.

순수 CSS와 SVG를 사용한 롤오버 효과는 다음과 같습니다.

나는 그것이 지저분한 것을 알고 있지만 당신은 이런 식으로 할 수 있습니다.

 .action-btn {
    background-size: 20px 20px;
    background-position: center center;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-radius: 30px;
    height: 40px;
    width: 60px;
    display: inline-block;
 }

.delete {
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#FB404B' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px' viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z'/%3e%3cpath d='M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
     border-color:#FB404B;
     
 }
 
 .delete:hover {
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#fff' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px' viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z'/%3e%3cpath d='M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");        
     background-color: #FB404B;
    }

<a class="action-btn delete">&nbsp;</a>

여기에서 svg를 데이터 URL로 변환 할 수 있습니다

1. https://codepen.io/elliz/full/ygvgay
2. https://websemantics.uk/tools/svg-to-background-image-conversion/

SVG는 기본적으로 코드이므로 내용 만 있으면됩니다. PHP를 사용하여 내용을 얻었지만 원하는 것을 사용할 수 있습니다.

<?php
$content    = file_get_contents($pathToSVG);
?>

그런 다음 div 컨테이너 안에 "있는 그대로"내용을 인쇄했습니다.

<div class="fill-class"><?php echo $content;?></div>

CSS에서 규칙을 컨테이너의 SVG 자식으로 규칙적으로 설정하려면

.fill-class > svg { 
    fill: orange;
}

재료 아이콘 SVG 로이 결과를 얻었습니다.

1. Mozilla Firefox 59.0.2 (64 비트) Linux

2. Google Chrome66.0.3359.181 (빌드 oficial) (64 비트) Linux

3. 오페라 53.0.2907.37 Linux

jQuery가 DOM의 모든 svg 요소를 처리하고 DOM의 크기가 적당한 경우 선택한 솔루션이 좋습니다. 그러나 DOM이 크고 DOM의 일부를 동적으로로드하기로 결정한 경우 svg 요소를 업데이트하기 위해 전체 DOM을 다시 스캔 해야하는 것은 의미가 없습니다. 대신 jQuery 플러그인을 사용하여 다음을 수행하십시오.

/**
 * A jQuery plugin that loads an svg file and replaces the jQuery object with its contents.
 *
 * The path to the svg file is specified in the src attribute (which normally does not exist for an svg element).
 *
 * The width, height and class attributes in the loaded svg will be replaced by those that exist in the jQuery object's
 * underlying html. Note: All other attributes in the original element are lost including the style attribute. Place
 * any styles in a style class instead.
 */
(function ($) {
    $.fn.svgLoader = function () {
        var src = $(this).attr("src");
        var width = this.attr("width");
        var height = this.attr("height");
        var cls = this.attr("class");
        var ctx = $(this);

        // Get the svg file and replace the <svg> element.
        $.ajax({
            url: src,
            cache: false
        }).done(function (html) {
            let svg = $(html);
            svg.attr("width", width);
            svg.attr("height", height);
            svg.attr("class", cls);
            var newHtml = $('<a></a>').append(svg.clone()).html();
            ctx.replaceWith(newHtml);
        });

        return this;
    };

}(jQuery));

html에서 다음과 같이 svg 요소를 지정하십시오.

<svg src="images/someSvgFile.svg" height="45" width="45" class="mySVGClass"/>

그리고 플러그인을 적용하십시오 :

$(".mySVGClass").svgLoader();

: 호버 이벤트 애니메이션의 경우 svg 파일에 스타일을 남길 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <style>
  rect {
    fill:rgb(165,225,75);
    stroke:none;
    transition: 550ms ease-in-out;
    transform-origin:125px 125px;
  }
  rect:hover {
    fill:rgb(75,165,225);
    transform:rotate(360deg);
  }
  </style>
</defs>
  <rect x='50' y='50' width='150' height='150'/>
</svg>

svgshare에서 이것을 확인하십시오