我想使用这种技术并更改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 >
当前回答
一个很好的方法是使用mixin来控制笔画颜色和填充颜色。我的“svg”被用作图标。
@mixin icon($color, $hoverColor) {
svg {
fill: $color;
circle, line, path {
fill: $color
}
&:hover {
fill: $hoverColor;
circle, line, path {
fill: $hoverColor;
}
}
}
}
然后你可以在你的SCSS文件中执行以下操作:
.container {
@include icon(white, blue);
}
其他回答
如果你想对一个内联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文件的颜色:
转到SVG文件，在styles下面，在fill中提到颜色:
<style>.cls-1{fill: #FFFFFF;}</style>
对于Angular用户来说，"inline-svg-2" npm库非常有用:
https://www.npmjs.com/package/ng-inline-svg-2 将<img src="">替换为<div inlineSVG="path_to_assets"></div> 在屏幕的SCSS文件中设置CSS“color:” 在SVG图片中使用fill="currentColor"或stroke="currentColor"。
您现在可以动态配置CSS颜色，包括使用CSS变量，SVG将会适应。
注意:“currentColor”技巧只适用于内联svg，这就是为什么我们需要一个特殊的模块。
我的用法是引导图标，复制您的SVG路径。
span{
path{
color: red;
}
}
SVG引导的一个例子:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-exclamation-octagon" viewBox="0 0 16 16">
<path
d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z" />
<path
d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
</svg>
为了改变SVG元素的颜色，我发现了一种方法，同时检查下面的谷歌搜索框搜索图标:
.search_icon { 颜色:红色; 填充:currentColor; 显示:inline-block; 宽度:100 px; 身高:100 px; ｝ < span class = " search_icon”> <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-. 27a6.471 6.471 000 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-。59岁4.23 - -1.57 l.27.28v。79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5 s7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg> . < / span >
我使用了一个span元素“display:inline-block”，高度，宽度和设置一个特定的样式“颜色:红色;到svg子元素继承的span标签。
