主页 / 问题 / 819176
Accepted
soledar10
Asked:2020-04-25 19:04:39 +0800 CST2020-04-25 19:04:39 +0800 CST

如何用svg替换img？

  • 772

img svg使用标签在页面上插入了一张图片img 

<img src="name-image.svg" alt="">

任务：更改fill给定图像

inline img作为替代选项svg

也许这个问题还有其他解决方案？

javascript

2 个回答

  1. 很好但很大的问题解决方案：

    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, if the viewport is not set the SVG wont't scale.
    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 path {fill: #000 !important;}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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

    我遇到这个问题很长时间了，当为了减少代码行的好处而更容易附加svg时img，但是你不能直接通过 改变颜色svg path{fill: value}，但是如果你使用上面的方法，那么上面的方法就更有效了不要鄙视jQuery。

    答案来源：@Drew Baker

    • 5
  2. Best Answer

    任务：更改给定图像的填充

    也就是说，您需要更改 svg 图像的颜色。这可以通过css或svg过滤器来完成

    CSS 过滤器

    HTML从网络添加到使用标签的黄色铃铛的原始 svg 图像<img> 

    img 
{
width:100px;
height:100px;
}
    <img src="https://twemoji.maxcdn.com/svg/1f514.svg">

    使用不同的 CSS 过滤器更改颜色

    .twa-bell {
  background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em;
}
.grey-out {
  opacity: 0.4;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.hue-rotate {
  filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
}
.invert {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}
    <body>
  <span class="twa-bell"></span>
  <span class="twa-bell grey-out"></span>
  <span class="twa-bell hue-rotate"></span>
  <span class="twa-bell invert"></span>
</body>

    SVG 过滤器

    SVG 过滤器比 SVG 过滤器有更多的支持CSS filter
    ，可以用来改变颜色，相当多。

    下面是一个使用示例feColorMatrix

    有关设置和使用的更多详细信息和可理解的信息，feColorMatrix
    请参阅我们网站的主题

    第一个过滤器id="dodgerFilter"立即将图标从黄色重新着色为蓝色。

    悬停时，第二个过滤器会触发id="redFilter"，呈现红色。

    .img1 
{
width:50px;
height:50px;
filter:url(#dodgerFilter);
transition: all 0.8s ease-in;
}
.img1:hover 
{
filter:url(#redFilter);
width:60px;
height:60px;
}
    <img class="img1" src="https://twemoji.maxcdn.com/svg/1f514.svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 200 130"> 
  <defs>
     <filter id="redFilter" x="-20" y="-20" width="150" height="150">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 0 1
                        0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 1 0
                "/>
    </filter> 
	  <filter id="dodgerFilter" x="-20" y="-20" width="150" height="150">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 0 1
                        0 0 0 1 0
                "/>
    </filter>
    
   </defs> 
   <use xlink:href="#Building" x="0" filter="url(#RedFilter)" ></use>
 
</svg>

    • 4

相关问题