Bagaimana cara mengubah warna gambar SVG menggunakan CSS (pengganti gambar jQuery SVG)?

Ini adalah tanya jawab diri sendiri atas sepotong kode praktis yang saya buat.

Saat ini, tidak ada cara mudah untuk menanamkan gambar SVG dan kemudian memiliki akses ke elemen SVG melalui CSS. Ada berbagai metode menggunakan kerangka kerja JS SVG, tetapi mereka terlalu rumit jika semua yang Anda lakukan adalah membuat ikon sederhana dengan keadaan rollover.

Jadi inilah yang saya pikirkan, yang saya pikir sejauh ini adalah cara termudah untuk menggunakan file SVG di situs web. Dibutuhkan konsepnya dari metode penggantian teks-ke-gambar awal, tetapi sejauh yang saya ketahui belum pernah dilakukan untuk SVG.

Ini pertanyaannya:

Bagaimana cara menanamkan SVG dan mengubah warnanya dalam CSS tanpa menggunakan kerangka kerja JS-SVG?

Pertama, gunakan tag IMG dalam HTML Anda untuk menyematkan grafik SVG. Saya menggunakan Adobe Illustrator untuk membuat grafik.

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

Ini seperti bagaimana Anda menanamkan gambar normal. Perhatikan bahwa Anda perlu mengatur IMG untuk memiliki kelas svg. Kelas 'tautan sosial' hanyalah untuk contoh saja. ID tidak diperlukan, tetapi berguna.

Kemudian gunakan kode jQuery ini (dalam file terpisah atau sebaris di 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');

        });

Apa yang dilakukan oleh kode di atas adalah mencari semua IMG dengan kelas 'svg' dan menggantinya dengan SVG inline dari file tertaut. Keuntungan besar adalah memungkinkan Anda menggunakan CSS untuk mengubah warna SVG sekarang, seperti:

svg:hover path {
    fill: red;
}

Kode jQuery yang saya tulis juga port di ID gambar dan kelas asli. Jadi CSS ini juga berfungsi:

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

Atau:

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

Anda dapat melihat contohnya berfungsi di sini: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html

Kami memiliki versi yang lebih rumit yang mencakup caching di sini: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

Gaya

svg path {
    fill: #000;
}

Naskah

$(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');
    });
});

Anda sekarang dapat menggunakan properti CSSfilter di sebagian besar browser modern (termasuk Edge, tetapi tidak IE11). Ini bekerja pada gambar SVG serta elemen lainnya. Anda dapat menggunakan hue-rotateatau invertmengubah warna, meskipun mereka tidak membiarkan Anda mengubah warna yang berbeda secara independen. Saya menggunakan kelas CSS berikut untuk menampilkan versi ikon "cacat" (di mana aslinya adalah gambar SVG dengan warna jenuh):

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

Ini membuatnya menjadi abu-abu terang di sebagian besar browser. Di IE (dan mungkin Opera Mini, yang belum saya uji) terasa memudar oleh properti opacity, yang masih terlihat cukup bagus, meskipun tidak abu-abu.

Berikut adalah contoh dengan empat kelas CSS berbeda untuk ikon lonceng Twemoji : asli (kuning), kelas "dinonaktifkan" di atas, hue-rotate(hijau), dan invert(biru).

.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>

Atau Anda dapat menggunakan CSS mask, dukungan browser yang diberikan tidak baik tetapi Anda dapat menggunakan mundur

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

Jika Anda dapat memasukkan file (PHP sertakan atau sertakan melalui CMS pilihan Anda) di halaman Anda, Anda dapat menambahkan kode SVG dan memasukkannya ke halaman Anda. Ini berfungsi sama seperti menempelkan sumber SVG ke halaman, tetapi membuat markup halaman lebih bersih.

Manfaatnya adalah Anda dapat menargetkan bagian-bagian SVG Anda melalui CSS untuk dibawa-bawa - tidak perlu javascript.

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

Anda hanya perlu menggunakan aturan CSS seperti ini:

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

Perhatikan bahwa !importantbit diperlukan untuk mengganti warna isian.

@Rew Baker memberikan solusi yang bagus untuk menyelesaikan masalah. Kode berfungsi dengan baik. Namun, mereka yang menggunakan AngularJs mungkin menemukan banyak ketergantungan pada jQuery. Akibatnya, saya pikir itu adalah ide yang bagus untuk menempelkan untuk pengguna AngularJS, sebuah kode yang mengikuti solusi @Drew Baker.

Cara angularJs dari kode yang sama

1. Html : gunakan tag di bawah ini di file html Anda:

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

2. Petunjuk : ini akan menjadi arahan bahwa Anda perlu mengenali tag:

'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. Unit-test dengan karma-melati :

'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]);
  });
});

Saya menyadari bahwa Anda ingin menyelesaikan ini dengan CSS, tetapi hanya pengingat jika itu adalah gambar kecil dan sederhana - Anda selalu dapat membukanya di Notepad ++ dan mengubah jalur / isi elemen apa pun:

<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"/>

Itu bisa menghemat satu ton skrip jelek. Maaf jika ini tidak masuk akal, tetapi kadang-kadang solusi sederhana dapat diabaikan.

... bahkan menukar banyak gambar svg mungkin lebih kecil daripada beberapa potongan kode untuk pertanyaan ini.

Saya menulis arahan untuk mengatasi masalah ini dengan AngularJS. Ini tersedia di sini - ngReusableSvg .

Itu menggantikan elemen SVG setelah itu diberikan, dan menempatkannya di dalam divelemen, membuat CSS-nya mudah diubah. Ini membantu menggunakan file SVG yang sama di tempat yang berbeda menggunakan ukuran / warna yang berbeda.

Penggunaannya sederhana:

<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>

Setelah itu, Anda dapat dengan mudah memiliki:

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

TL / DR: PERGI di sini-> https://codepen.io/sosuke/pen/Pjoqqp

Penjelasan:

Saya berasumsi Anda memiliki html sesuatu seperti ini:

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

Pasti pergi rute filter, yaitu. svg Anda kemungkinan besar hitam atau putih. Anda dapat menerapkan filter untuk membuatnya menjadi warna apa pun yang Anda inginkan, misalnya, saya memiliki svg hitam yang saya inginkan hijau mint. Pertama-tama saya membalikkannya menjadi putih (yang secara teknis semua warna RGB penuh) kemudian bermain dengan saturasi rona dll. Untuk memperbaikinya:

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

Yang lebih baik adalah Anda bisa menggunakan alat untuk mengubah hex yang Anda inginkan menjadi filter untuk Anda: https://codepen.io/sosuke/pen/Pjoqqp

Ini versi untuk knockout.jsberdasarkan jawaban yang diterima:

Penting: Ini sebenarnya membutuhkan jQuery juga untuk penggantian, tapi saya pikir mungkin bermanfaat bagi sebagian orang.

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');

        }
    };

Kemudian cukup terapkan data-bind="svgConvert: true"ke tag img Anda.

Solusi ini sepenuhnya mengganti imgtag dengan SVG dan ikatan tambahan apa pun tidak akan dihormati.

Berikut adalah kode kerangka kerja, hanya js murni:

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)
        })

Ada pustaka sumber terbuka yang disebut SVGInject yang menggunakan onloadatribut untuk memicu injeksi. Anda dapat menemukan proyek GitHub di https://github.com/iconfu/svg-inject

Berikut adalah contoh minimal menggunakan SVGInject:

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

Setelah gambar dimuat, onload="SVGInject(this)akan memicu injeksi dan <img>elemen akan diganti dengan isi file SVG yang disediakan dalam srcatribut.

Ini memecahkan beberapa masalah dengan injeksi SVG:

1. SVG dapat disembunyikan sampai injeksi selesai. Ini penting jika gaya sudah diterapkan selama waktu pemuatan, yang jika tidak akan menyebabkan "flash konten tanpa gaya" singkat.

2. <img>Elemen - elemen menyuntikkannya sendiri secara otomatis. Jika Anda menambahkan SVG secara dinamis, Anda tidak perlu khawatir tentang memanggil fungsi injeksi lagi.

3. String acak ditambahkan ke setiap ID dalam SVG untuk menghindari memiliki ID yang sama beberapa kali dalam dokumen jika SVG disuntikkan lebih dari satu kali.

SVGInject adalah Javascript biasa dan bekerja dengan semua browser yang mendukung SVG.

Penafian: Saya adalah rekan penulis SVGInject

Jika kita memiliki lebih banyak gambar svg seperti itu, kita juga dapat mengambil bantuan file font.
Situs seperti https://glyphter.com/ bisa mendapatkan kita file font dari svgs kami.

Misalnya

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

Anda dapat menggunakan data-gambar untuk itu. menggunakan data-image (data-URI) Anda dapat mengakses SVG seperti inline.

Berikut adalah efek rollover menggunakan CSS murni dan SVG.

Saya tahu itu berantakan tetapi Anda bisa melakukannya dengan cara ini.

 .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>

Anda dapat mengonversi svg Anda ke url data di sini

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

Karena SVG pada dasarnya adalah kode, Anda hanya perlu konten. Saya menggunakan PHP untuk mendapatkan konten, tetapi Anda dapat menggunakan apa pun yang Anda inginkan.

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

Lalu, saya sudah mencetak konten "apa adanya" di dalam wadah div

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

Untuk menetapkan aturan untuk anak SVG kontainer di CSS

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

Saya mendapat hasil ini dengan ikon materi SVG:

1. Mozilla Firefox 59.0.2 (64-bit) Linux

2. Google Chrome66.0.3359.181 (Build oficial) (64 bit) Linux

3. Opera 53.0.2907.37 Linux

Solusi yang dipilih baik-baik saja jika Anda ingin jQuery memproses semua elemen svg di DOM Anda dan DOM Anda memiliki ukuran yang masuk akal. Tetapi jika DOM Anda besar dan Anda memutuskan untuk memuat bagian DOM Anda secara dinamis, itu benar-benar tidak masuk akal harus menelusuri ulang seluruh DOM hanya untuk memperbarui elemen svg. Alih-alih, gunakan plugin jQuery untuk melakukan ini:

/**
 * 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));

Di html Anda, tentukan elemen svg sebagai berikut:

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

Dan terapkan plugin:

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

untuk: hover animasi acara kita dapat meninggalkan gaya di dalam file svg, seperti a

<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>

periksa ini di svgshare