我想使用这种技术并更改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 添加或重写每个路径的填充属性为fill="currentColor" 现在，svg将采用你的字体颜色，所以你可以做一些像这样的事情: svg { 颜色:“红色”; ｝
其他回答
最短的bootstrap兼容方式，没有JavaScript:
.cameraicon {
height: 1.6em; /* Set your own icon size */
mask: url(/camera.svg); /* Path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}
像这样使用它:
<td class="text-center">
<div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>
要更改任何SVG的颜色，您可以通过在任何文本编辑器中打开SVG文件直接更改SVG代码。代码可能如下所示:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
C181.113,454.921,171.371,464.663,161.629,474.404z"/>
/* Some more code goes on */
</g>
</svg>
您可以观察到有一些XML标记，如路径、圆、多边形等。在style属性的帮助下，您可以添加自己的颜色。请看下面的例子
<path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
C181.113,454.921,171.371,464.663,161.629,474.404z"/>
将style属性添加到所有标记中，这样就可以获得所需颜色的SVG。
根据Daniel的评论，我们可以直接使用填充属性，而不是样式属性中的填充元素。
为了更好地解决Manish Menaria的回答(非常感谢您的帮助)，请使用此过滤器生成器而不是专用生成器:https://angel-rs.github.io/css-color-filter-generator/
.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
你可以试着用这个css滤镜来给它上色:
.colorize-pink {
filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}
.colorize-navy {
filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}
.colorize-blue {
filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}
一个很好的方法是使用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);
}
