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>
网友评论