wake-up-neo.net

Wie ändert man die Farbe eines SVG-Bildes mit CSS (jQuery-SVG-Bildersetzung)?

Dies ist ein selbstständiges Q & A eines praktischen Codes, den ich mir ausgedacht habe.

Derzeit gibt es keine einfache Möglichkeit, ein SVG-Bild einzubetten und dann über CSS auf die SVG-Elemente zuzugreifen. Es gibt verschiedene Methoden für die Verwendung von JS SVG-Frameworks. Sie sind jedoch zu kompliziert, wenn Sie lediglich ein einfaches Symbol mit einem Rollover-Status erstellen.

Hier ist also das, worauf ich gekommen bin, was meiner Meinung nach der einfachste Weg ist, SVG-Dateien auf einer Website zu verwenden. Es basiert auf den frühen Methoden des Ersetzens von Text in Bild, aber soweit ich weiß, wurde dies für SVGs noch nie getan.

Das ist die Frage:

Wie kann ich eine SVG-Datei einbetten und deren Farbe in CSS ändern, ohne ein JS-SVG-Framework zu verwenden?

410
Drew Baker

Verwenden Sie zunächst ein IMG-Tag in Ihrem HTML-Code, um eine SVG-Grafik einzubetten. Ich habe Adobe Illustrator zum Erstellen der Grafik verwendet.

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

Dies ist genau so, wie Sie ein normales Bild einbetten würden. Beachten Sie, dass Sie den IMG so einstellen müssen, dass er eine Klasse von svg hat. Die Klasse "Social-Link" dient nur als Beispiel. Die ID ist nicht erforderlich, aber nützlich.

Verwenden Sie dann diesen jQuery-Code (in einer separaten Datei oder inline im 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');

        });

Der obige Code sieht für alle IMGs mit der Klasse 'svg' vor und ersetzt sie durch die Inline-SVG aus der verknüpften Datei. Der enorme Vorteil ist, dass Sie CSS jetzt verwenden können, um die Farbe der SVG-Datei zu ändern, wie dies z.

svg:hover path {
    fill: red;
}

Der jQuery-Code, den ich geschrieben habe, wird auch über die ursprüngliche Abbild-ID und -Klassen hinweg portiert. Also dieses CSS funktioniert auch:

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

Oder:

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

Sie können ein Beispiel davon hier sehen: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html

Wir haben eine kompliziertere Version, die das Caching hier beinhaltet: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

516
Drew Baker

Stil

svg path {
    fill: #000;
}

Skript

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

Sie können jetzt die CSS filter-Eigenschaft in die meisten modernen Browser verwenden (einschließlich Edge, aber nicht IE11). Es funktioniert sowohl für SVG-Bilder als auch für andere Elemente. Sie können hue-rotate oder invert verwenden, um Farben zu ändern. Sie können jedoch nicht verschiedene Farben unabhängig voneinander ändern. Ich verwende die folgende CSS-Klasse, um eine "deaktivierte" Version eines Symbols anzuzeigen (wobei das Original ein SVG-Bild mit gesättigter Farbe ist):

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

Dies macht es in den meisten Browsern hellgrau. In IE (und wahrscheinlich Opera Mini, das ich nicht getestet habe), ist es durch die Opazitätseigenschaft merklich verblasst, was immer noch ziemlich gut aussieht, obwohl es nicht grau ist.

Hier ein Beispiel mit vier verschiedenen CSS-Klassen für das Symbol Twemoji bell: original (gelb), die oben genannte "disabled" -Klasse, hue-rotate (grün) und invert (blau).

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

27
aldel

Alternativ können Sie CSS mask verwenden, die Browser-Unterstützung gewährt ist nicht gut, aber Sie können einen Fallback verwenden

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

Wenn Sie Dateien (PHP-Include oder Include über Ihr CMS Ihrer Wahl) in Ihre Seite aufnehmen können, können Sie den SVG-Code hinzufügen und in Ihre Seite einbinden. Dies funktioniert genauso wie das Einfügen der SVG-Quelle in die Seite, die Seitenmarkierung wird jedoch sauberer.

Der Vorteil ist, dass Sie Teile Ihrer SVG-Datei per CSS für Hover anvisieren können - kein Javascript erforderlich.

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

Sie müssen nur eine CSS-Regel wie diese verwenden:

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

Beachten Sie, dass das !important-Bit erforderlich ist, um die Füllfarbe zu überschreiben.

24
trebor1979

@Drew Baker gab eine großartige Lösung, um das Problem zu lösen. Der Code funktioniert einwandfrei. Diejenigen, die AngularJs verwenden, können jedoch eine starke Abhängigkeit von jQuery feststellen. Daher hielt ich es für eine gute Idee, für AngularJS-Benutzer einen Code einzufügen, der der Lösung von @Drew Baker folgt.

AngularJs Weg des gleichen Codes  

1. Html: Verwenden Sie das unten angegebene Tag in Ihrer HTML-Datei:

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

2. Direktive: Dies ist die Direktive, die Sie benötigen, um das Tag zu erkennen:

'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 mit Karma-Jasmin:

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

Ich verstehe, dass Sie dies mit CSS erreichen möchten, aber nur eine Erinnerung, falls es sich um ein kleines, einfaches Bild handelt. Sie können es immer in Notepad ++ öffnen und den Pfad bzw. das Element eines beliebigen Elements ändern:

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

Es könnte eine Menge hässliches Skript sparen. Tut mir leid, wenn es abseits der Basis liegt, aber manchmal werden die einfachen Lösungen übersehen.

... selbst das Austauschen mehrerer SVG-Bilder ist möglicherweise kleiner als einige der Codeausschnitte für diese Frage.

12
DShultz

Ich habe eine Anweisung zur Lösung dieses Problems mit AngularJS geschrieben. Es ist verfügbar here - ngReusableSvg .

Es ersetzt das SVG-Element, nachdem es gerendert wurde, und fügt es in ein div-Element ein, wodurch das CSS leicht änderbar ist. Dies hilft, die gleiche SVG-Datei an verschiedenen Stellen mit unterschiedlichen Größen/Farben zu verwenden.

Die Verwendung ist einfach:

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

Danach können Sie leicht haben:

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

Hier ist ein No-Framework-Code, nur reine 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)
        })
4
user3144480

Hier ist eine Version für knockout.js basierend auf der akzeptierten Antwort:

Wichtig: Es benötigt tatsächlich auch jQuery für das Ersetzen, aber ich dachte, es könnte für einige nützlich sein.

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

        }
    };

Dann wenden Sie einfach data-bind="svgConvert: true" auf Ihr img-Tag an.

Diese Lösung ersetzt das img-Tag vollständig durch eine SVG-Datei, und zusätzliche Bindungen werden nicht berücksichtigt.

4
Simon_Weaver

Da SVG im Grunde Code ist, benötigen Sie nur Inhalte. Ich habe PHP verwendet, um Inhalte zu erhalten, aber Sie können verwenden, was Sie möchten.

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

Dann habe ich Inhalt "wie er ist" in einem Div-Container gedruckt

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

Um die Regel für SVG-untergeordnete Elemente des Containers in CSS festzulegen

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

Ich habe diese Ergebnisse mit einem Material-Icon SVG erhalten:

  1. Mozilla Firefox 59.0.2 (64-Bit) Linux

 enter image description here

  1. Google Chrome66.0.3359.181 (Build oficial) (64 Bit) Linux

 enter image description here

  1. Opera 53.0.2907.37 Linux

 enter image description here

3
Benjamin

Es gibt eine Open-Source-Bibliothek namens SVGInject, die das Attribut onload zum Auslösen der Injektion verwendet. Sie finden das GitHub-Projekt unter https://github.com/iconfu/svg-inject

Hier ist ein minimales Beispiel mit SVGInject:

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

Nachdem das Bild geladen wurde, löst onload="SVGInject(this) die Injektion aus und das <img>-Element wird durch den Inhalt der SVG-Datei ersetzt, die im src-Attribut enthalten ist.

Es löst mehrere Probleme mit der SVG-Injektion:

  1. SVGs können ausgeblendet werden, bis die Injektion abgeschlossen ist. Dies ist wichtig, wenn bereits während der Ladezeit ein Style angewendet wird, der ansonsten zu einem kurzen "Flash" für nicht gestylte Inhalte führen würde.

  2. Die <img>-Elemente werden automatisch eingefügt. Wenn Sie SVGs dynamisch hinzufügen, müssen Sie sich nicht darum kümmern, die Injektionsfunktion erneut aufzurufen.

  3. Jeder ID in der SVG wird eine zufällige Zeichenfolge hinzugefügt, um zu vermeiden, dass dieselbe ID mehrmals im Dokument angezeigt wird, wenn eine SVG mehr als einmal injiziert wird. 

SVGInject ist Javascript und funktioniert mit allen Browsern, die SVG unterstützen.

Disclaimer: Ich bin der Co-Autor von SVGInject

3
Waruyama

Wenn wir eine größere Anzahl solcher svg-Bilder haben, können wir auch Font-Dateien verwenden.
Sites wie https://glyphter.com/ können uns eine Schriftartdatei aus unseren svgs liefern.


Z.B.

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

Sie können Daten-Image dafür verwenden. Über Daten-Image (Daten-URI) können Sie wie Inline auf SVG zugreifen.

Hier ist ein Rollover-Effekt mit reinem CSS und SVG.

Ich weiß es chaotisch, aber Sie können dies tun.

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

Sie können Ihre SVG-Datei in eine Daten-URL umwandeln

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

Die ausgewählte Lösung ist in Ordnung, wenn jQuery alle svg-Elemente in Ihrem DOM verarbeiten soll und Ihr DOM eine angemessene Größe hat. Wenn Ihr DOM jedoch groß ist und Sie sich entscheiden, Teile Ihres DOM dynamisch zu laden, macht es wirklich keinen Sinn, das gesamte DOM erneut scannen zu müssen, um die svg-Elemente zu aktualisieren. Verwenden Sie stattdessen ein jQuery-Plugin:

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

Geben Sie in Ihrer HTML-Datei ein svg -Element wie folgt an:

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

Und das Plugin anwenden:

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

für: Hover-Ereignisanimationen können wir die Stile in der svg-Datei belassen.... wie 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>

überprüfe dies auf svgshare