Question

我想使用相同的svg（transfer.svg）但只使用css的不同颜色，它必须兼容IE 11，Edge，FF和chrome。

＆＃13;

img {
  height: 50px; 
}

＆＃13;

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

＆＃13;

提前谢谢。

Answer 1

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

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

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

如何更改SVG图像的颜色

2 个答案: