我想使用这种技术并更改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);
}
其他回答
一个很好的方法是使用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);
}
解决方案1 -编辑SVG指向currentColor
<svg>... fill: currentColor stroke: currentColor ...</svg>
然后你可以从你的CSS内容中控制笔画和填充的颜色:
svg {
color: blue; /* Or any color of your choice. */
}
利与弊:
简单，使用常规支持的CSS。
合适的如果:
你可以控制SVG SVG可以内联包含在HTML中。
解决方案2 - CSS掩码属性
<i class="icon"></i>
.icon {
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-image: url(https://url.of.svg/....svg);
mask-image: url(https://url.of.svg/....svg);
background-color: blue; /* Or any color of your choice. */
width: 20px;
height: 20px;
}
}
利弊
相对容易使用 浏览器对掩码CSS属性的支持是部分的。
合适的如果:
SVG是外部的，通过URL包含 意味着在现代已知的浏览器上使用。
解决方案3 - CSS过滤器属性-静态颜色
如果预先知道颜色，可以使用https://codepen.io/sosuke/pen/Pjoqqp找到将SVG更改为所需颜色所需的筛选器。例如，将svg转换为#00f:
<img src="https://url.of.svg/....svg" class="icon">
.icon {
filter: invert(8%) sepia(100%) saturate(6481%) hue-rotate(246deg) brightness(102%) contrast(143%);
}
如果你的原始颜色不是黑色，在滤镜列表中加上亮度(0)饱和度(100%)的前缀，将其首先转换为黑色。
利与弊:
可能会有一个小的，不显著的差异之间的结果和期望的颜色。
合适的如果:
想要的颜色是预先知道的。 外部形象
如果你想对一个内联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标记。应付和粘贴到你的html，然后改变填补你所选择的颜色
对于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，这就是为什么我们需要一个特殊的模块。
