如何更改SVG图像的颜色[重复]答案

【问题标题】：How to change color of SVG image [duplicate]如何更改SVG图像的颜色[重复]
【发布时间】：2018-11-25 00:08:08
【问题描述】：

我想要相同的 svg (transfer.svg) 但仅使用 css 的不同颜色，它必须兼容 IE 11、Edge、FF 和 chrome。

img {
  height: 50px; 
}

&lt;img src="https://sendeyo.com/up/d/615ba77e71" alt=""&gt;

提前谢谢你。

【问题讨论】：

也有点相关：stackoverflow.com/q/12583879/1169798

标签： html css svg

【解决方案1】：

您无法更改嵌入图像的 svg 的颜色。为了能够与svg 内容进行交互，您必须将其包含为内联html，而不是通过img 标记。喜欢

<body>
  <svg><!-- your svg content here --></svg>
</body>

【讨论】：

答案很简单。干得好！

【解决方案2】：

参考此链接：http://jsfiddle.net/wuSF7/462/

已经做到了

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

      // Check if the viewport is set, else we gonna set it if we can.
      if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
        $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
      }

      // Replace image with new SVG
      $img.replaceWith($svg);

    }, 'xml');

  });
});

svg {
  width: 350px;
  height: 350px;
}

svg path {
  fill: #000 !important;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg" alt="Microsoft" width="350" />
<img class="svg" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg" alt="Microsoft" width="350" height="350">

【讨论】：