我想使用这种技术并更改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 >
当前回答
如果你想使用CSS来改变颜色，你也可以使用这样的在线工具:使用CSS过滤器改变SVG颜色
其他回答
Manish Menaria的回答有一些问题，如果我们转换白色，它会显示灰色。
所以我添加了一些调整，下面的例子特别展示了如何改变材质图标的颜色:
<mat-icon class="draft-white" svgIcon="draft" aria-hidden="false"></mat-icon>
.draft-white{
filter: brightness(0) invert(1);
}
您可以使用字体图标来使用SVG中的任何CSS选项
我正在寻找一种方法来拥有任何CSS选项，如SVG的动画，我最终用我的SVG生成一个字体图标，然后在一个跨度内使用它(如font Awesome)，因此任何CSS选项，如着色，都是可用的。
我使用https://icomoon.io将SVG图像转换为字体图标。然后你可以像Font Awesome或MaterialIcon一样在HTML元素中使用它。
我的用法是引导图标，复制您的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>
一个很好的方法是使用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);
}
最短的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>
