如何使用CSS（jQuery SVG图像替换）更改SVG图像的颜色？

这是我想出的一段简便代码的自我问答

目前，没有一种简单的方法可以嵌入SVG图像，然后通过CSS访问SVG元素。使用JS SVG框架的方法多种多样，但是如果您所做的只是制作一个具有滚动状态的简单图标，那么这些方法就过于复杂了

这就是我想到的，我认为这是目前为止在网站上使用SVG文件最简单的方法。它的概念从早期的文本到图像替换方法，但据我所知，还没有为SVG做过

问题是：

---

如何在不使用JS-SVG框架的情况下在CSS中嵌入SVG并更改其颜色？首先，在HTML中使用IMG标记嵌入SVG图形。我用Adobe Illustrator制作了这个图形

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

上面的代码所做的是查找具有类“svg”的所有IMG，并将其替换为链接文件中的内联svg。它的巨大优势在于，现在可以使用CSS更改SVG的颜色，如下所示：

svg:hover path {
    fill: red;
}

我编写的jQuery代码还跨原始图像ID和类提供端口。所以这个CSS也可以工作：

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

或：

您可以在这里看到一个工作示例：

我们有一个更复杂的版本，其中包括缓存：

如果可以在页面中包含文件（PHP包含或通过您选择的CMS包含），则可以添加SVG代码并将其包含到页面中。这与将SVG源粘贴到页面中的工作原理相同，但会使页面标记更清晰

好处是，您可以通过CSS将SVG的某些部分作为悬停的目标——不需要javascript

您只需使用如下CSS规则：

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

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

---

请注意，

！重要信息

位是覆盖填充颜色所必需的。

或者，您可以使用CSS

掩码

，虽然不好，但可以使用回退

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

---

@德鲁·贝克提出了一个很好的解决问题的办法。代码工作正常。然而，那些使用AngularJs的人可能会发现jQuery有很多依赖性。因此，我认为为AngularJS用户粘贴一个遵循@Drew Baker解决方案的代码是一个好主意

相同代码的AngularJs方式

一,。Html：在Html文件中使用下面的标记：

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

四,。使用karma jasmine进行单元测试：

“严格使用”；
description（'指令：svgImage'，函数（）{
var$rootScope，$compile，element，scope，$httpBackend，apirl，data；
beforeach（函数（）{
模块（“myApp”）；
注入（函数（$injector）{
$rootScope=$injector.get（“$rootScope”）；
$compile=$injector.get（“$compile”）；
$httpBackend=$injector.get（“$httpBackend”）；
apiUrl=$injector.get（'apiUrl'）；
});
scope=$rootScope.$new（）；
元素=角度。元素（“”）；
元素=$compile（元素）（范围）；
spyOn（作用域，'manufactualimgnode'）。和callthrough（）；
$httpBackend.whenGET（apiUrl+'me'）.respond（200，{}）；
数据=“”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'';
$httpBackend.expectGET（'/icons/icon-man.svg'）.respond（200，数据）；
});
之后（函数（）{
$httpBackend.VerifyNoOutstandingExpection（）；
$httpBackend.verifyNoOutstandingRequest（）；
});
它（'should call manipleignode至少调用一次'，函数（）{
$httpBackend.flush（）；
expect（scope.manipleignode.callCount）.toBe（1）；
});
它（'应该返回正确的结果'，函数（）{
$httpBackend.flush（）；
var result=scope.manipleimgnode（数据、元素）；
期望（结果）；
});
它（'应该定义类'，函数（）{
$httpBackend.flush（）；
var result=scope.manipleimgnode（数据、元素）；
var classList=[“svg”]；
expect（result.classList[0]）.toBe（classList[0]）；
});
});

如果我们有更多这样的svg图像，我们也可以借助字体文件。
像这样的网站可以从SVG获得字体文件

---

例如

---

我用AngularJS写了一个指令来解决这个问题。它是可用的

在呈现SVG元素后，它将替换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>

风格

剧本

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

现在可以使用in（包括边缘，但不包括IE11）。它适用于SVG图像以及其他元素。您可以使用

色调旋转

或

反转

来修改颜色，尽管它们不允许您单独修改不同的颜色。我使用以下CSS类来显示图标的“禁用”版本（其中原始图标是带有饱和颜色的SVG图片）：

这使得它在大多数浏览器中呈浅灰色。在IE（可能还有Opera Mini，我还没有测试过）中，它明显地被不透明属性褪色了，尽管它不是灰色的，但看起来仍然很不错

下面是一个示例，其中钟形图标有四个不同的CSS类：original（黄色）、上面的“disabled”类、

色调旋转

（绿色）和

反转

（蓝色）

.twa bell{
背景图像：url（“https://twemoji.maxcdn.com/svg/1f514.svg");
显示：内联块；
背景重复：无重复；
背景位置：中心；
高度：3em；
宽度：3em；
保证金：0.15em 0.3em；
垂直对齐：-0.3em；
背景尺寸：3em3em；
}
.灰发{
不透明度：0.4；
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；
}
.色调旋转{
过滤器：色调旋转（90度）；
-webkit过滤器：色调旋转（90度）；
}
.倒置{
过滤器：倒置（100%）；
-webkit过滤器：倒置（100%）；
}

---

以下是基于公认答案的

knockout.js版本：

重要提示：实际上，repl也需要jQuery
.any-class-you-wish{
    border: 1px solid red;
    height: 300px;
    width:  120px
}

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

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

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

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

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

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

        }
    };

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

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

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

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

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

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

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

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

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

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

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

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

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(3,122,247)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}