精华内容
下载资源
问答
  • svg改变颜色 css实现

    2021-07-29 17:18:24
    img src=xxx.svg的情况 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=...

    img src=xxx.svg的情况

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>通过css改变单色svg颜色</title>
        <style>
            .main{
                padding: 50px 100px;
                display: flex;
            }
            .box{
                position: relative;
                width: 40px;
                height: 40px;
                overflow: hidden;
                margin: 0 20px;
            }
            .box > img{
                width: 100%;
                height: 100%;
                position: absolute;
                left: -40px;
                top: 0;
                filter: drop-shadow(#C9C9C9 40px 0);
            }
            .box:hover img{
                filter: drop-shadow(#4364E8 40px 0);
            }
        </style>
    </head>
    <body>
    <p>svg -> svg img</p>
    <div class="main">
        <div class="box">
            <img src="./img/telegram.svg" alt="">
        </div>
        <div class="box">
            <img src="./img/twitter.svg" alt="">
        </div>
        <div class="box">
            <img src="./img/medium.svg" alt="">
        </div>
    </div>
    </body>
    </html>
    

    实现原理:利用filter的drop-shadow进行描边填充,生成一个有形状的阴影,并设置自己需要的颜色

    svg dom的情况

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>通过css改变单色svg颜色</title>
        <style>
            .main{
                padding: 50px 100px;
                display: flex;
            }
            .svg{
                width: 40px;
                height: 40px;
                margin: 0 20px;
                fill: #C9C9C9;
            }
            .svg:hover{
                fill: #4364E8;
            }
    
        </style>
    </head>
    <body>
    
    <p>svg->svg dom</p>
    <div class="main">
        <svg id="icon-Telegram" viewBox="0 0 1024 1024" class="svg">
            <path d="M1021.17504 146.432l-154.538667 728.704c-11.648 51.413333-42.069333 64.213333-85.248 39.978667l-235.434666-173.482667-113.621334 109.226667c-12.544 12.629333-23.04 23.125333-47.274666 23.125333l16.896-239.786667 436.352-394.24c18.944-16.938667-4.138667-26.325333-29.482667-9.386666L269.388373 570.197333 37.153707 497.536c-50.517333-15.786667-51.413333-50.517333 10.496-74.752l908.373333-349.952c42.026667-15.786667 78.848 9.386667 65.109333 73.6z"></path>
        </svg>
        <svg id="icon-Twitter" viewBox="0 0 1024 1024" class="svg">
            <path d="M989.866667 196.992c-35.669333 16.256-73.642667 26.922667-112.597334 31.616A200.618667 200.618667 0 0 0 963.498667 117.461333c-38.4 23.338667-80.554667 39.808-124.586667 48.682667A193.365333 193.365333 0 0 0 695.808 102.698667c-108.245333 0-196.010667 90.026667-196.010667 201.088 0 15.786667 1.706667 31.061333 5.034667 45.781333-162.986667-8.405333-307.413333-88.405333-404.181333-210.133333a204.672 204.672 0 0 0-26.538667 101.12c0 69.76 34.645333 131.328 87.210667 167.381333A192.512 192.512 0 0 1 72.533333 382.848v2.474667c0 97.450667 67.584 178.730667 157.269334 197.12-16.768 4.778667-34.133333 7.168-51.626667 7.082666-12.586667 0-24.917333-1.194667-36.864-3.584 24.917333 79.914667 97.28 138.026667 183.125333 139.605334A387.157333 387.157333 0 0 1 34.133333 808.874667a545.962667 545.962667 0 0 0 300.586667 90.282666c360.704 0 557.909333-306.346667 557.909333-572.032 0-8.789333-0.213333-17.493333-0.512-26.026666a402.176 402.176 0 0 0 97.749334-104.106667"></path>
        </svg>
        <svg id="icon-Discord" viewBox="0 0 1024 1024" class="svg">
            <path d="M339.925333 483.541333c50.688 0 91.733333 38.016 90.88 84.48 0 46.506667-40.106667 84.48-90.88 84.48-49.834667 0-90.88-37.973333-90.88-84.48 0-46.464 40.106667-84.48 90.88-84.48z m325.12 0c50.773333 0 90.88 38.016 90.88 84.48 0 46.506667-40.106667 84.48-90.88 84.48-49.834667 0-90.837333-37.973333-90.837333-84.48 0-46.464 40.106667-84.48 90.88-84.48z m84.224 398.208c192.042667-6.186667 265.984-134.826667 265.984-134.826666 0-285.696-125.226667-517.248-125.226666-517.248-125.013333-95.744-244.138667-93.141333-244.138667-93.141334l-12.16 14.208c147.754667 46.122667 216.32 112.725333 216.32 112.725334a698.112 698.112 0 0 0-261.546667-85.162667 720.426667 720.426667 0 0 0-175.488 1.706667c-5.248 0-9.6 0.853333-14.762666 1.706666-30.421333 2.730667-104.362667 14.208-197.290667 55.978667-32.128 15.018667-51.285333 25.770667-51.285333 25.770667S221.824 193.28 378.197333 147.2l-8.704-10.666667s-119.04-2.602667-244.138666 93.184c0 0-125.141333 231.509333-125.141334 517.162667 0 0 72.96 128.597333 265.045334 134.826667 0 0 32.085333-39.850667 58.282666-73.557334-110.421333-33.792-152.064-104.789333-152.064-104.789333s8.618667 6.272 24.234667 15.146667c0.853333 0.853333 1.706667 1.792 3.456 2.602666 2.645333 1.877333 5.248 2.730667 7.893333 4.48 21.674667 12.416 43.392 22.186667 63.36 30.165334 35.626667 14.208 78.208 28.416 127.829334 38.186666a596.48 596.48 0 0 0 225.066666 0.853334 563.2 563.2 0 0 0 125.952-38.101334 498.944 498.944 0 0 0 99.968-52.394666s-43.434667 72.746667-157.312 105.642666a3683.413333 3683.413333 0 0 0 57.429334 71.808h-0.085334z"></path>
        </svg>
    </div>
    
    </body>
    </html>
    

    实现原理,svg可以直接通过fill样式进行填充指定颜色

    注意

    在使用antd的Carousel走马灯效果时候,出现一闪一闪重绘filter的情况

    分析:将overflow: hidden;去掉发现就不会闪烁,可能是因为实体img被判定为隐藏,走马灯效果导致每次css重绘了filter(猜测)

    解决:将外层overflow: hidden;去掉,使用before伪类生成等大块块将实体覆盖即可

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>通过css改变单色svg颜色</title>
        <style>
            .main{
                padding: 50px 100px;
                display: flex;
            }
            .box2{
                position: relative;
                width: 40px;
                height: 40px;
                /*overflow: hidden;*/
                margin: 0 20px;
            }
            .box2:before{
                position: absolute;
                left: -40px;
                top: 0;
                z-index: 2;
                content: '';
                width: 40px;
                height: 40px;
                background: #FFFFFF;
            }
            .box2 > img{
                width: 100%;
                height: 100%;
                position: absolute;
                left: -40px;
                top: 0;
                filter: drop-shadow(#C9C9C9 40px 0);
            }
            .box2:hover img{
                filter: drop-shadow(#4364E8 40px 0);
            }
        </style>
    </head>
    <body>
    
    <p>svg -> svg img 2</p>
    <div class="main">
        <div class="box2">
            <img src="./img/telegram.svg" alt="">
        </div>
        <div class="box2">
            <img src="./img/twitter.svg" alt="">
        </div>
        <div class="box2">
            <img src="./img/medium.svg" alt="">
        </div>
    </div>
    </body>
    </html>
    

    demo: https://yuan30-1304488464.cos.ap-guangzhou.myqcloud.com/blog/demo/drop-shadow/index.html

    MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow()

    展开全文
  • 怎么改变svg颜色

    2020-10-20 15:06:01
    怎么改变svg颜色? 问题: 在做一个svg的填充颜色切换的时候,发现使用jquery的.css(‘fill’,red)没法切换,一个正常的svg 例如: 里面的fill是写死的(就是fill是写在svg元素里面的),所以没法通过外部的...

    怎么改变svg的颜色?
    问题:
    在做一个svg的填充颜色切换的时候,发现使用jquery的.css(‘fill’,red)没法切换,一个正常的svg
    例如:

    里面的fill是写死的(就是fill是写在svg元素里面的),所以没法通过外部的.css方法来改变;

    解决办法:
    把svg里的fill属性给删除,然后在style里面定义svg的fill,后面的jquery就可以通过.css方法来做成颜色切换的一个动态效果了;

    展开全文
  • 动态改变SVG颜色

    2021-05-16 15:38:08
    最近写页面,根据设计标签 hover的时候需要改变图片颜色状态,切下的图又是svg格式,使用外部引入的方式; 网上搜索发现 1、可以在svg文件中更改fill属性更改图片,但是就不能动态更改了呀;除非使用内敛方式,但是...

    最近写页面,根据设计标签 hover的时候需要改变图片颜色状态,切下的图又是svg格式,使用外部引入的方式;
    网上搜索发现
    1、可以在svg文件中更改fill属性更改图片,但是就不能动态更改了呀;除非使用内敛方式,但是页面中展示svg内容感觉不是很好;
    2、查看path标签内fill属性的值,要实现鼠标移入更改svg颜色,即修改fill属性值

    svg:hover path{
    	fill:red;
    }
    

    但是我用的是img标签引入的,好像是找不到svg的,也不太行
    3、通过网上查看可以使用 css filter: drop-shadow(#fff 80px 0);通过产生一个可指定颜色的阴影放置于svg的位置,并将原始svg移出视线;
    当给img添加 filter 属性后:会出现两个相距80px的图片,第二个为阴影,动态更改的就是这个阴影的颜色
    在这里插入图片描述
    那么我们就把实际的img移除视野就好了, 我的做法是给外层div一个overflow:hidden;然后通过定位或margin-left的方法把实际图片移除,让阴影在我们所需的位置上就好了
    在这里插入图片描述

    展开全文
  • background-image使用svg如何改变颜色

    千次阅读 2019-09-03 21:09:39
    结论 在我多番测试之后,才发现background-image使用svg改变颜色根本做不了。 分析 当svg图片被使用成background-image,颜色的设置需要在svg内部才能生效。在外部C...

    结论

    在我多番测试之后,才发现background-image使用svg,改变颜色根本做不了。

    分析
    当svg图片被使用成background-image,颜色的设置需要在svg内部才能生效。在外部CSS设置颜色样式,却是无效,这其实可以从CSS选择器得到解释,CSS选择器必须选择到DOM元素,而svg却被做成背景图,并没有以元素引入,所以在外部也就设不了颜色。

    例子

    CSS:

    i {
        display: inline-block;
        width: 100px;
        height: 100px;
    }
    .icon-del{
        background-image: url(delete.svg);
    }
    .st0{fill:#EC665E;}
    .st1{fill:#FFFFFF;}

    HTML:

    <i class="icon-del"></i>

    SVG:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          viewBox="-691 693 16 16" style="enable-background:new -691 693 16 16;" xml:space="preserve">
    <title>删除群成员</title>
    <desc>Created with Sketch.</desc>
    <g id="Page-1">
         <g id="群组名片成员_x28_管理员_x29_" transform="translate(-284.000000, -249.000000)">
              <g id="Group-19">
                   <g id="Group-14" transform="translate(20.000000, 120.000000)">
                        <g id="群成员-copy-4" transform="translate(0.000000, 121.000000)">
                             <g id="删除群成员" transform="translate(264.000000, 8.000000)">
                                  <g id="Group" transform="translate(2.000000, 2.000000)">
                                       <g id="Oval-9">
                                            <circle class="st0" cx="-685" cy="699" r="6"/>
                                       </g>
                                       <g id="Path-2">
                                            <path class="st1" d="M-681,700h-8c-0.6,0-1-0.4-1-1s0.4-1,1-1h8c0.6,0,1,0.4,1,1S-680.4,700-681,700z"/>
                                       </g>
                                  </g>
                             </g>
                        </g>
                   </g>
              </g>
         </g>
    </g>
    </svg>

     

    展开全文
  • css hover改变svg颜色

    2021-08-26 14:43:03
    想要实现菜单前的icon(svg格式),根据hover改变svg颜色,并且默认选中项也是高亮。最终实现思路,参考如上连接的方法。 <div class="of-h cursor-pointer"> <div class="btn step-init-position"><...
  • android 动态改变SVG颜色

    万次阅读 2017-04-12 16:03:52
    android 动态改变SVG颜色 废话不多说,直接撸代码 关于SVG的生成与动画,在此不做描述  VectorDrawableCompat vectorDrawableCompat = VectorDrawableCompat.create(getResources(),R.drawable.ic_home_black_24
  • 1 Qt加载SVG图片 QTreeWidgetItem *item = new QTreeWidgetItem; //svg_path为SVG图片路径 QSvgRenderer *svg_render = new QSvgRenderer(svg_path); QPixmap *pixmap = new QPixmap(32, 32); pixmap->...
  • css之svg img颜色改变

    万次阅读 2019-01-09 16:28:50
      ...Hover的时候改变图标颜色,图标为引入的svg img     在这里我们svg颜色是在标签内通过fill属性写死的,所以用到了使用了CSS3滤镜filter中的drop-shadow。        ...
  • 使用Qt类将SVG转换为QPixmap格式是非常容易的,在Qt文档中有些相关的例子,但是这些例子仅仅处理了屏幕设备的标准像素比为1的情况。 如果你需要在高分屏上显示图像,结果会有些不一样。下面的函数传入SVG文件的路径...
  • SVG修改颜色

    2020-09-17 16:11:14
    UI提供的svg颜色不统一,想要修改颜色。 操作方法: 用txt打开svg,在path中添加fill,设置颜色
  • 开发场景: 使用 svg 画图形, 可改变大小, 颜色 html 代码svg 属性说明: version: 版本号xmlns : 指定命名空间, 设置规范viewbox : viewBox="x, y, width, height" // x: 左上角横坐标, y: 左上角纵坐标, width: 宽度...
  • 可以直接改svg属性,也可以通过css修改,但是前端一般都是通过img标签直接引入的svg图片,这样不管是从后期维护还是代码整洁度考虑,都更佳优秀,但问题也随之而来,没法通过css改变svg颜色。下面来介绍一种通过...
  • web前端 改变SVG图的颜色

    万次阅读 2018-11-13 14:16:15
    前端人员,也要懂一下PS,像一些图片,我们都可以扔到PS里面,换成我们...现在教大家自己动手改变SVG颜色的方法操作如下 1.拿到SVG图右击打开方式使用记事本打开就会看到以下代码   2.看到箭头指示的地方cls-...
  • 本文出自: http://blog.csdn.net/wyk304443164 使用的是 filter drop-shadow 如果你只想兼容 Chrome 那么请看: ...如果你想兼容ios Android 小程序,那么.tian-word {
  • 颜色的定义是用stroke属性,可以指定颜色值。 定义svg: &lt;html&gt; &lt;body&gt; &lt;h1&gt;My first SVG&lt;/h1&gt; &lt;svg xmlns="http://...
  • 需求如下图,hover的时候改变图标颜色,图标为引入的svg img一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?但是为了更小的开销,一般css为更好的...
  • 在用作背景图像时修改SVG填充颜色SVG输出直接放在页面代码中,我可以简单地用CSS修改填充颜色,如下所示:polygon.mystar{fill:blue;}circle.mycircle{fill:green;}这很好用,但是当SVG作为背景图像时,我正在寻找...
  • 深色模式下怎么把图像改成浅色
  • 改变SVG图的颜色

    万次阅读 2018-07-20 15:49:53
    今早收到UI的icon文件夹,好多都是SVG的图,有些图标的颜色不是图稿中需要的颜色,那么这个时候怎么自己手动修改想要的颜色呢? 首先,它原先的颜色长这样    我们先在SVG图上右击,用记事本打开,然后就会看到一堆...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,018
精华内容 4,807
关键字:

svg改变颜色