Як змінити колір SVG-зображення за допомогою CSS (заміна зображення jQuery SVG)?


437

Це власне запитання з корисного фрагмента коду, який я придумав.

Наразі непростий спосіб вставити SVG-зображення, а потім отримати доступ до елементів SVG за допомогою CSS. Існують різні методи використання фреймворків JS SVG, але вони надмірно складні, якщо все, що ви робите, - це зробити простий значок зі станом перекидання.

Отже, ось що я придумав, і, на мою думку, це найпростіший спосіб використання файлів SVG на веб-сайті. Вона бере свою концепцію від ранніх методів заміни тексту на зображення, але, наскільки мені відомо, ніколи не робилося для SVG.

Це питання:

Як я можу вставити SVG та змінити його колір у CSS, не використовуючи рамку JS-SVG?


1
На жаль, тег img не працює з файлами svg в IE, тому майте це на увазі. IE розпізнає вбудовувані теги. У будь-якому випадку, приємна робота!

2
Для svg слід використовувати властивість css "fill". Для зображень доцільно використовувати "фільтр". "Фільтр" насправді працює для обох, але все це не потрібно робити для векторної графіки.
Samy Bencherif

Відповіді:


536

По-перше, використовуйте тег IMG у своєму HTML, щоб вбудувати SVG-графіку. Я використовував Adobe Illustrator для створення графіки.

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

Це так само, як ви вбудовували нормальне зображення. Зауважте, що вам потрібно встановити IMG, щоб мати клас svg. Клас "соціальної зв'язку" - це лише заради прикладів. Ідентифікатор не обов'язковий, але корисний.

Потім використовуйте цей код 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');

        });

Описаний вище код - це шукати всі IMG-класи з класом 'svg' та замінювати його на вбудований SVG з пов'язаного файлу. Масивна перевага полягає в тому, що він дозволяє використовувати CSS для зміни кольору SVG зараз так:

svg:hover path {
    fill: red;
}

Код jQuery, який я написав, також працює через порти оригінальних зображень і класів. Тож працює і цей 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


6
Іноді це може не працювати в Safari (наприклад,), щоб переконатися, що повернені дані читаються, замініть });$ .get на}, 'xml');
Джоан

29
Можливо, ви могли навіть замінити селектор img[src$=".svg"]і усунути потребу в svgкласі.
Кейсі Чу

2
@LeonGaban Я не думаю, що є спосіб націлити заповнення фонового зображення. Було б дуже корисно, якби ви могли!
Дрю Бейкер

3
Трохи пізно, @LeonGaban, але кращим способом зробити це, ймовірно, було б взагалі видалити атрибут fill і покластись на файл CSS, щоб додати заливку до батьківського svg. $('#ico_company path').removeAttr('fill'). Потім ви можете зробити це #ico_company { fill: #ccc }у своєму CSS-файлі
bioball

2
@Soaku, було б легко встановити jQuery, щоб усі шляхи були такими ж, як колір шрифту, роблячи щось на зразок `var color = $ img.closest ('p'). Css ('color'); $ svg.find ('шлях'). attr ('заливка', колір); `Але я думаю, що це робота, краще залишити CSS.
Дрю Бейкер

56

Стиль

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

1
Якщо у вас немає attr ширини, він просто створює один з неправильним числом. width="170.667"у моєму випадку
затримка

2
Це не ідеально, оскільки він втрачає попередні розміри img.
RichieHH

Привіт припустімо, у мене різні SVG з кольором різного кольору кожен. Використовуючи цей метод, всі мої кольори svg стають такими ж, як і перший svg, який перебуває в циклі. Будь-яка ідея, як я маневрую навколо цього, щоб кожен колір залишався таким же, як і раніше?
tnkh

1
зауважте, що якщо ваш svg виготовлений також з нефігурних pathформ (наприклад rect), вам також потрібно буде обробити їх у css
Mugen,

33

Тепер ви можете використовувати властивість CSSfilter у більшості сучасних браузерів (включаючи Edge, але не IE11). Він працює як на SVG-образах, так і на інших елементах. Ви можете використовувати hue-rotateабо invertзмінювати кольори, хоча вони не дозволяють вам змінювати різні кольори незалежно. Я використовую такий клас CSS, щоб показати "відключену" версію піктограми (де оригіналом є зображення SVG із насиченим кольором):

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

Це робить його світло-сірим у більшості браузерів. У IE (і, мабуть, Opera Mini, яку я не перевіряв) він помітно згасає властивістю непрозорості, яка все ще виглядає досить непогано, хоча й не сіра.

Ось приклад з чотирма різними класами CSS для значка дзвоника Twemoji : оригінал (жовтий), вище "інвалід" класу, hue-rotate(зелений) та invert(синій).


Щойно помітив, що інвертування - це гарне рішення, якщо ви не хочете створювати шрифти значків. Я використовував цей код jQuery для зміни піктограми в заголовку мого веб-сайту відповідно до властивості кольору css (зауважте, що я використовую білі піктограми png):if ($('.w3-top img').css("color") == "rgb(0, 0, 0)") { $('.w3-top img').css("filter", "invert(100%)"); $('.w3-top img').css("-webkit-filter", "invert(100%)"); };
RedClover

Чудовий підхід. Відредагував мій SVG xml для додавання цільового кольору піктограми, а потім використав клас .icon-disabled, щоб відтінити його.
SushiGuy

Зверніть увагу, що старий Explores не підтримує фільтр: w3schools.com/cssref/css3_pr_filter.asp
JillAndMe

25

Крім того, ви можете використовувати CSS mask, надана підтримка веб-переглядача не є хорошою, але ви можете використовувати резервний

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

14
MDN вказує, що -webkit-maskне слід використовувати на будь-якому виробничому веб-сайті.
vaindil

1
не забарвлює svg
vishal

Можливо, доречно сказати, що зараз, через чотири роки, це рішення працює у всіх основних браузерах. Просто перевірений тут, і це на 100% нормально.
Даніель Лемес

23

Якщо ви можете включити на свою сторінку файли (PHP включати або включити через вибрану CMS), ви можете додати SVG-код і включити його на свою сторінку. Це працює так само, як вставлення джерела SVG на сторінку, але робить розмітку сторінки чистішою.

Перевага полягає в тому, що ви можете орієнтуватися на частини вашого SVG за допомогою CSS для наведення курсора - JavaScript не потрібен.

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

Вам просто потрібно використовувати таке CSS правило:

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

Зауважте, що !importantбіт необхідний для зміни кольору заливки.


3
Для тих, хто використовує AngularJS:<div ng-include="'svg.svg'"></div>
Mikel

Однак не дуже елегантне рішення для зберігання даних SVG у базі даних. Не помиляється, але викачування даних XML / html / svg DOM з API або CMS, а не використання шаблонів чи інших активів, просто не так.
ChristoKiwi

Дякую за цей внесок ... Найсучасніші веб-сайти сьогодні гніздять дані svg, щоб дозволити всі види діяльності, без цієї відповіді я б не здогадався про це!
webMan

Крім того, якщо у вашому SVG є прозорі ділянки, вони не вважатимуться ширяючими, і у вас може виникнути "кричуще наведення". Щоб виправити це, просто додайте елемент обгортки (<a>, якщо це зручно), а потім додайте це до правила CSS. #pathidorclass:hover, .wrapperclass:hover #pathidorclass { fill: green; }Або навіть просто усуньте оригінальне наведення курсору SVG, оскільки ви націлюєте його на елемент обгортки зараз.
Ніл Монро

18

@Drew Baker дав чудове рішення для вирішення проблеми. Код працює належним чином. Однак ті, хто використовує AngularJs, можуть виявити велику залежність від jQuery. Отже, я подумав, що це гарна ідея вставити для користувачів AngularJS - код, що відповідає рішенням @Drew Baker.

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

1
ваше рішення не працює, може бути<div ng-include="/icons/my.svg" class="any-class-you-wish"></div>
Гійом Вінсент

@guillaumevincent, якщо ви хочете використовувати його, ng-includeтоді просто змініть цей рядок var imgURL = element.attr('src');наvar imgURL = element.attr('ng-include');
Max

Це дуже зручне рішення, але будьте обережні при їх надмірному використанні, оскільки це може вразити продуктивність досить важко - IE набір з 5 піктограм спільного використання, повторених у списку статей, або щось подібне.
skxc

1
В IE є проблема з вашим кодом. Ви можете використовувати просто if (typeof(imgClass) !== 'undefined') { $svg.setAttribute("class", imgClass); }замість спліт та для циклу.
Роберт Бокорі

2
Дивовижна робота! Але для певного зображення потрібно схопити перший елемент svg ( angular.element(data)[0];) і змусити його працювати з використанням IE if ($svg.getAttribute('class')) { $svg.setAttribute('class', $svg.getAttribute('class') + ' ' + imgClass); } else { $svg.setAttribute('class', imgClass); }. Також ви можете додати cache: trueдо параметрів, $http.getінакше сторінка може стати дуже повільною.
лео

16

Я усвідомлюю, що ти хочеш досягти цього за допомогою CSS, але лише нагадування, якщо це невелике, просте зображення - ви завжди можете відкрити його в «Блокноті ++» та змінити шлях / заповнення whateverelement:

<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-зображень може бути менших розмірів, ніж деякі фрагменти коду для цього питання.


7

Я написав директиву для вирішення цього питання з 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
}

Привіт, дякую за надання цього рішення. Я спробував це, і він дає: <div ng-click = "eventHandler ()" ng-class = "classEventHandler ()" style = "висота: 30px; ширина: 30px; float: left;" class = "svg-class" id = "my-svg" height = "30" width = "30"> [[об'єкт SVGSVGElement]] </div> У html він просто ставить [[об'єкт SVGSVGElement]]. Ви знаєте, в чому проблема? Інше питання, чи має це великий вплив на продуктивність чи я можу використовувати його на багатьох svg-сторінках на сторінці? І останнє - це все ще на кутовому 1.3 (байка).
берслінг

Яку версію кутового ви використовуєте? Ви не стикалися зі своєю проблемою .. можливо, це щось із SVG? Виробничий перемикач відносно важкий, я використовував його як 10, і це було чудово. Я думаю, це залежить від кількості / розміру, тому пробуйте і експериментуйте з ним. У чому проблема з цистерною? Використовуєте іншу версію і виникає конфлікт?
Омрі Ахарон

5

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

Ще краще те, що ви можете просто скористатися інструментом для перетворення потрібного вам шестикутника у фільтр: https://codepen.io/sosuke/pen/Pjoqqp


Це чудове рішення, що стосується css, плюс коден з шестигранної для фільтра просто приголомшливий.
Річі Гонсалес

4

Ось версія на 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, і будь-які додаткові прив’язки не будуть дотримуватися.


2
Це чудово! Якщо ви хочете перейти на наступний рівень, у нас є оновлена ​​версія, що включає кешування, тому той самий SVG не запитується двічі. github.com/funkhaus/style-guide/blob/master/template/js/…
Дрю Бейкер

Я трохи хвилювався з цього приводу, але не встиг сам заглянути в це. Просто потрібно було щось швидке
Simon_Weaver

1
@DrewBaker насправді я більше переймався тим, що тег img запитає файл, а потім getбуде запитувати його знову. Я вважав , змінюючи srcдо data-srcатрибуту по imgтегу, але прийшов до висновку , що сучасні браузери, ймовірно , досить розумні , щоб кешувати файл в будь-якому випадку
Simon_Weaver

3

Ось без рамкового коду, лише чистий 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)
        })

3

Існує бібліотека з відкритим кодом під назвою SVGInject, яка використовує onloadатрибут для запуску ін'єкції. Ви можете знайти проект 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>елемент буде замінено вмістом файлу SVG, наданого в srcатрибуті.

Він вирішує кілька проблем із ін'єкцією SVG:

  1. SVG-файли можна приховати, поки ін'єкція не закінчиться. Це важливо, якщо стиль вже застосовується під час завантаження, що в противному випадку спричинить короткий "неспокійний спалах вмісту".

  2. Ці <img>елементи INJECT themselved автоматично. Якщо ви додаєте SVG динамічно, вам не доведеться турбуватися про виклик ін'єкційної функції знову.

  3. До кожного ідентифікатора в SVG додається випадкова рядок, щоб у документі не було одного і того ж ідентифікатора кілька разів, якщо SVG вводиться більше одного разу.

SVGInject - це звичайний Javascript і працює з усіма браузерами, які підтримують SVG.

Відмова: Я є співавтором SVGInject


1
Мені це рішення найбільше подобається, тому що воно піклується про динамічно додані SVG.
VickyB

2

Якщо у нас є більша кількість таких SVG зображень, ми також можемо скористатися файлами шрифтів.
Такі сайти, як https://glyphter.com/, можуть отримати нам файл шрифту з нашого svgs.


Напр

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

5
Я особисто ненавиджу техніку "зображення як шрифт". Це ускладнює додавання / редагування зображень, додає багато безглуздої розмітки. Шрифти мають бути шрифтами, зображення - зображеннями тощо.
Дрю Бейкер

Домовились. Вам також потрібно запам'ятати / переглянути зображення, призначені символам. але для конкретного випадку, коли зображення використовуються як піктограми / кнопки / кулі, вони виступають швидше як текст, ніж медіа, файли шрифтів також можуть бути альтернативою
Abhishek Borar

навіть github більше не використовують шрифт для піктограми github.com/blog/2112-delivering-octicons-with-svg
gagarine

2

Для цього можна використовувати дані-зображення. за допомогою даних-зображення (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, де потрібно лише змінити певні шляхи / багатокутники / тощо.
Дрю Бейкер

Ні, ти не можеш ... але це дуже складно
patelarpan

Це просто рішення для ікони
patelarpan

Якщо деякі працюють з іконою. Тоді це чудово. Bootstrap 4 також використовує цю техніку
patelarpan

2

Оскільки SVG в основному код, вам потрібен лише вміст. Я використовував PHP для отримання вмісту, але ви можете використовувати все, що завгодно.

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

Потім я надрукував вміст "як є" всередині контейнера div

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

Щоб остаточно встановити правило для SVG-дочірок контейнера на CSS

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

Я отримав ці результати за допомогою значка матеріалу SVG:

  1. Mozilla Firefox 59.0.2 (64-розрядний) Linux

введіть тут опис зображення

  1. Google Chrome66.0.3359.181 (build oficial) (64 біт) Linux

введіть тут опис зображення

  1. Opera 53.0.2907.37 Linux

введіть тут опис зображення


1

Вибране рішення чудово, якщо ви хочете, щоб jQuery обробляв усі SVG елементи у вашому DOM, а ваш DOM має розумні розміри. Але якщо ваш DOM великий, і ви вирішили динамічно завантажувати частини свого DOM, насправді немає сенсу повторно переглядати весь DOM лише для оновлення svg елементів. Замість цього використовуйте плагін 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! github.com/funkhaus/style-guide/blob/master/template/js/…
Дрю Бейкер

1

для: наведенні анімації події ми можемо залишити стилі у файлі 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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.