我想使用这种技术并更改SVG颜色，但到目前为止我还不能这样做。我在CSS中使用这个，但我的图像总是黑色的，无论如何。
我的代码:
.change-my-color { 填充:绿色; ｝ svg < > <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src=" ppngback .png" /> < / svg >
当前回答
我的答案是。但我不确定它是否对每个人都适用:
选择“svg”，然后选择“path”。然后你可以改变'fill'。
.eye-icon-container {
width: 33px;
height: 33px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
:hover {
background-color: #ddf0ff;
}
:active {
background-color: #1d398d;
svg {
path {
fill: #fff;
}
}
}
}
其他回答
定位'svg'标签内的路径:
<svg>
<path>....
</svg>
你可以内联，比如:
<path fill="#ccc">
Or
svg{
path{
fill: #ccc
如果你想对一个内联SVG文件这样做，也就是说，例如，CSS内容中的背景图像:
背景:url(“数据:photo /svg+xml;charset=utf8，%3Csvg xml ='http://www.w3.org/2000/svg' fill='rgba(1.39,215.1)' viewBox=' ..3e % %3C/svg%3E’);
当然，替换…使用您的内联图像代码。
我的答案是。但我不确定它是否对每个人都适用:
选择“svg”，然后选择“path”。然后你可以改变'fill'。
.eye-icon-container {
width: 33px;
height: 33px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
:hover {
background-color: #ddf0ff;
}
:active {
background-color: #1d398d;
svg {
path {
fill: #fff;
}
}
}
}
最简单的技巧是在页面加载时使用jQuery改变颜色。
$(document).ready(function () {
$('svg').find('path').attr('fill', '#FFF');
});
#FFF是你想要设置的颜色代码。
我添加了一个测试页面-通过滤镜设置为SVG着色:
例如,
滤镜:反色(0.5)棕色(1)饱和(5)色相旋转(175度)
上传和着色您的SVG - Jsfiddle
我的想法来自:在图像标签SVGs上交换填充颜色
