RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 819176
Accepted
soledar10
soledar10
Asked:2020-04-25 19:04:39 +0000 UTC2020-04-25 19:04:39 +0000 UTC 2020-04-25 19:04:39 +0000 UTC

如何用svg替换img?

  • 772

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

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

任务:更改fill给定图像

inline img作为替代选项svg

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

javascript
  • 2 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. user192664
    2020-06-18T03:35:41Z2020-06-18T03:35:41Z

    很好但很大的问题解决方案:

    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
    Alexandr_TT
    2020-02-27T17:53:34Z2020-02-27T17:53:34Z

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

    也就是说,您需要更改 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

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    是否可以在 C++ 中继承类 <---> 结构?

    • 2 个回答
  • Marko Smith

    这种神经网络架构适合文本分类吗?

    • 1 个回答
  • Marko Smith

    为什么分配的工作方式不同?

    • 3 个回答
  • Marko Smith

    控制台中的光标坐标

    • 1 个回答
  • Marko Smith

    如何在 C++ 中删除类的实例?

    • 4 个回答
  • Marko Smith

    点是否属于线段的问题

    • 2 个回答
  • Marko Smith

    json结构错误

    • 1 个回答
  • Marko Smith

    ServiceWorker 中的“获取”事件

    • 1 个回答
  • Marko Smith

    c ++控制台应用程序exe文件[重复]

    • 1 个回答
  • Marko Smith

    按多列从sql表中选择

    • 1 个回答
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Suvitruf - Andrei Apanasik 什么是空? 2020-08-21 01:48:09 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5