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

Posted

技术标签:

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

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

img 
  height: 50px; 

<img src="https://sendeyo.com/up/d/615ba77e71" alt="">

提前谢谢你。

【问题讨论】：

也有点相关：***.com/q/12583879/1169798 【参考方案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"   />
<img class="svg" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg"   >

【讨论】：

以上是关于如何更改SVG图像的颜色[重复]的主要内容，如果未能解决你的问题，请参考以下文章

如何在html对象元素中更改svg位置的背景颜色[重复]

更改 img src SVG 颜色 [重复]

使用 CSS 更改 svg 图像的颜色 [重复]

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

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

如何在活动时更改 svg 图像的颜色？