【CSS】SVG图标/外链图片改变颜色

2024-02-19  本文已影响0人  LemonTree7

1、透明图标.svg更改颜色;

html的img没法直接更改.svg图标样式,展示方案:需要通过阴影进行展示,隐藏掉图片原身,设置阴影的颜色进行更改图标颜色。

template:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="14" viewBox="0 0 13 14">
         <image :href="link(url)"></image>
</svg>

css:

 svg{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      box-sizing: border-box;
      border: 1px solid #000000;
      padding-top: 10%;
      padding-left: 10%;

      image{
        width: 90%;
        height: 90%;
        overflow: hidden;
        filter: drop-shadow(#000000 90px 0);
        transform: translateX(-90px);
      }
}

2、svg更改颜色

使用style的color颜色无效,使用fill进行填充颜色。

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
        svg{
          fill: red;
        }
        </style>
    </head>
    <body>
        <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.8333755,11.9990374 C11.9027873,13.4363438 9.50985482,14.287126 6.9179768,14.287126 C4.32609878,14.287126 1.93316631,13.4363438 0.002578128,11.9990374 L6.9179768,0.0214844 L13.8333755,11.9990374 Z" id="a"/>
        </svg>
    </body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读