我想使用这种技术http://css-tricks.com/svg-fallbacks/并更改svg颜色，但到目前为止我还没能这样做。我把它放在css中，但不管是什么，我的形象总是黑的。我的代码：
.change-my-color {
fill: green;
}<svg>
<image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
答案 0 :(得分：135)
要更改任何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标记，如路径，圆形，多边形等。在那里，您可以借助样式属性添加自己的颜色。请看下面的例子
<path style="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"/>
将样式属性添加到所有标记，以便您可以获得所需颜色的SVG
答案 1 :(得分：101)
您不能以这种方式更改图像的颜色。如果您将SVG作为图像加载，则无法在浏览器中更改使用CSS或Javascript显示的方式。
如果您想更改SVG图片，则必须使用<object>，<iframe>或内联<svg>加载它。
如果要使用页面中的技术，则需要Modernizr库，您可以在其中检查SVG支持并有条件地显示或不显示后备图像。然后，您可以内联SVG并应用所需的样式。
见：
#time-3-icon {
fill: green;
}
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
您可以内联SVG，使用班级名称（my-svg-alternate）标记您的后备图片：
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
在CSS中使用Modernizr的no-svg类（CDN：http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js）来检查SVG支持。如果没有SVG支持，将忽略SVG块并显示图像，否则图像将从DOM树中删除（display: none）：
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}
然后您可以更改内联元素的颜色：
#time-3-icon {
fill: green;
}
答案 2 :(得分：73)
我遵循的更改SVG颜色的步骤：
<img src="dotted-arrow.svg" class="filter-green"/>
例如，＃00EE00 的输出是
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
答案 3 :(得分：23)
添加了测试页 - 通过过滤器设置为SVG着色：
E.G
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)
答案 4 :(得分：8)
最简单的方法是使用https://icomoon.io/app/#/select等服务从SVG创建字体。上传你的SVG，点击＆＃34;生成字体＆＃34;，将字体文件和css包含在你身边，然后像其他任何文字一样使用和设置样式。我总是这样使用它，因为它使造型更容易。
编辑：正如article中所提及的@ CodeMouse92图标字体搞砸屏幕阅读器（并且可能对搜索引擎优化不利）。所以要坚持使用SVG。
答案 5 :(得分：7)
您可以尝试使用过滤器黑客：
.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);
}
答案 6 :(得分：6)
仅包含路径信息的SVG 。你无法对图像这样做..作为你可以改变笔划和填充信息的路径，你就完成了。 喜欢Illustrator
所以：通过CSS你可以覆盖路径fill值
path { fill: orange; }
但是如果您想要更灵活的方式，因为您希望在进行一些悬停效果时使用文本进行更改..使用
path { fill: currentcolor; }
body {
background: #ddd;
text-align: center;
padding-top: 2em;
}
.parent {
width: 320px;
height: 50px;
display: block;
transition: all 0.3s;
cursor: pointer;
padding: 12px;
box-sizing: border-box;
}
/*** desired colors for children ***/
.parent{
color: #000;
background: #def;
}
.parent:hover{
color: #fff;
background: #85c1fc;
}
.parent span{
font-size: 18px;
margin-right: 8px;
font-weight: bold;
font-family: 'Helvetica';
line-height: 26px;
vertical-align: top;
}
.parent svg{
max-height: 26px;
width: auto;
display: inline;
}
/**** magic trick *****/
.parent svg path{
fill: currentcolor;
}<div class='parent'>
<span>TEXT WITH SVG</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>
答案 7 :(得分：5)
如果使用一些技巧，可以使用css更改SVG着色。 我写了一个小脚本。
$('img.svg-changeable').each(function () {
var $e = $(this);
var imgURL = $e.prop('src');
$.get(imgURL, function (data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// change the color
$svg.find('path').attr('fill', '#000');
$e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
});
});
上面的代码可能无法正常工作，我已经为具有svg背景图像的元素实现了这一点，该图像与此类似。 但无论如何你必须修改这个脚本以适合你的情况。希望它有所帮助。
答案 8 :(得分：5)
要更改 SVG 元素的颜色，我在检查下面的 Google 搜索框搜索图标时找到了一种方法：
.search_icon {
color: red;
fill: currentColor;
display: inline-block;
width: 100px;
height: 100px;
}<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 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</span>我使用了带有“display:inline-block”、高度、宽度的 span 元素，并将特定样式“color: red; fill: currentColor;”设置为由继承的 span 标签子 svg 元素。
答案 9 :(得分：4)
定位svg中的路径：
<svg>
<path>....
</svg>
您可以内联，例如：
<path fill="#ccc">
或
svg{
path{
fill: #ccc
答案 10 :(得分：3)
只需更改svg的颜色：
转到svg文件并在样式下，提及填充颜色。
<style>.cls-1{fill:#FFFFFF;}</style>
答案 11 :(得分：3)
这里是速度与激情的方式:)
body{
background-color: #deff05;
}
svg{
width: 30%;
height: auto;
}
svg path {
color:red;
fill: currentcolor;
}<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 514.666 514.666"><path d="M514.666,210.489L257.333,99.353L0,210.489l45.933,19.837v123.939h30V243.282l33.052,14.274v107.678l4.807,4.453 c2.011,1.862,50.328,45.625,143.542,45.625c93.213,0,141.53-43.763,143.541-45.626l4.807-4.452V257.557L514.666,210.489z M257.333,132.031L439,210.489l-181.667,78.458L75.666,210.489L257.333,132.031z M375.681,351.432 c-13.205,9.572-53.167,33.881-118.348,33.881c-65.23,0-105.203-24.345-118.348-33.875v-80.925l118.348,51.112l118.348-51.111 V351.432z"></path></svg>答案 12 :(得分：3)
简单有效的方法
使用任何文本编辑器打开.svg文件
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 477.526 477.526" style="enable-background:new 0 0 477.526 477.526;
fill: rgb(109, 248, 248);" xml:space="preserve">
<svg />
赋予样式属性并用颜色填充
在您的形状中填充颜色，我具有 rect 形状fill="white
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="602" width="802" y="-1"
x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%"
id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%"
width="100%"/>
</g>
</g>
</svg>
答案 13 :(得分：1)
<svg>... fill: currentColor stroke: currentColor ...</svg>
然后你可以从你的css中控制笔触的颜色和填充
svg {
color: blue; // or any color of your choice.
}
优缺点：
适用于：
<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;
}
}
优缺点
mask 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%);
}
如果您的原始颜色不是黑色，则在过滤器列表前添加 brightness(0) saturate(100%) 以将其先转换为黑色。
优缺点：
适用于：
答案 14 :(得分：1)
使用 svg <mask> 元素。
这比其他解决方案更好，因为：
<svg style="color: green; width: 96px; height: 96px" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<mask id="fillMask" x="0" y="0" width="100" height="100">
<image xlink:href="https://svgur.com/i/AFM.svg" x="0" y="0" width="100" height="100" src="ppngfallback.png" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="100" style="stroke: none; fill: currentColor" mask="url("#fillMask")" />
</svg>答案 15 :(得分：1)
实际上，对于此问题有一个更为灵活的解决方案：编写一个Web Component，它将在运行时将SVG修补为文本。还发布在gist中，并带有指向JSFiddle的链接
?滤镜：反转（42％）棕褐色（93％）饱和（1352％）色相旋转（87deg）亮度（119％）对比度（119％）;
<html>
<head>
<title>SVG with color</title>
</head>
<body>
<script>
(function () {
const createSvg = (color = '#ff9933') => `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
<defs/>
<g>
<ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
<ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
<path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
</g>
</svg>`.split('#ff9933').join(color);
function SvgWithColor() {
const div = Reflect.construct(HTMLElement, [], SvgWithColor);
const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
div.innerHTML = createSvg(color);
return div;
}
SvgWithColor.prototype = Object.create(HTMLElement.prototype);
customElements.define('svg-with-color', SvgWithColor);
document.body.innerHTML += `<svg-with-color
color='magenta'
></svg-with-color>`;
})();
</script>
</body>
</html>
答案 16 :(得分：1)
例如，在您的HTML中：
<body>
<svg viewBox="" width="" height="">
<path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
</body>
使用jQuery：
$("#struct1").css("fill","<desired colour>");
答案 17 :(得分：1)
.icon{
--size : 70px;
display: inline-block;
width: var(--size);
height: var(--size);
-webkit-mask-size: cover;
mask-size: cover;
transition: .12s;
}
.icon-bike{
background: black;
-webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
}
.icon-bike:hover{
background: green;
}<i class="icon icon-bike" style="--size:150px"></i>
答案 18 :(得分：1)
如果你想对内联svg执行此操作，例如，css中的背景图像：
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");
当然，用您的内联图片代码替换...
答案 19 :(得分：0)
一个好的方法是使用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);
}
答案 20 :(得分：0)
如果要动态更改颜色：
fill的属性添加或重写到此fill="currentColor" svg {
color : "red";
}
答案 21 :(得分：0)
最短的Bootstrap兼容方式，没有JavaScript：
#include <iostream>
using namespace std;
int main() {
char a;
for (char a = 0; a <= 127; a++)
{
cout << a << " ";
if (a % 16 == 0)
cout << endl;
if (a > 127)
break;
}
return 0;
}
并像这样使用它：
.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;
}
答案 22 :(得分：0)
如果你想用css来改变颜色，你也可以使用这样的在线工具：https://change-svg-color.vercel.app/
答案 23 :(得分：0)
如果要对 svg 的颜色进行编程，则不应直接在 svg 图像上设置颜色。
2021年可以使用下面的css进行颜色的改变。
html{
--iron-icon-fill-color-1:green;
--iron-icon-fill-color-2:red;
--iron-icon-stroke-color:white;
}
svg#icon-green{
fill: var(--iron-icon-fill-color-1, currentcolor);
stroke: var(--iron-icon-stroke-color, none);
}
svg#icon-red{
fill: var(--iron-icon-fill-color-2, currentcolor);
stroke: var(--iron-icon-stroke-color, none);
}
svg#icon{
fill: var(--iron-icon-fill-color-x, currentcolor);
stroke: white;
}<html>
<body>
<svg id="icon-green" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
<circle cx="20" cy="20" r="18" stroke-width="3"/>
<path d="M 10,10 30,30 M 10,30 30,10" fill="none" stroke-width="6"/>
</svg>
<svg id="icon-red" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
<circle cx="20" cy="20" r="18" stroke-width="3"/>
<path d="M 10,10 30,30 M 10,30 30,10" fill="none" stroke-width="6"/>
</svg>
<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
<circle cx="20" cy="20" r="18" stroke-width="3"/>
<path d="M 10,10 30,30 M 10,30 30,10" fill="none" stroke-width="6"/>
</svg>
</body>
</html>答案 24 :(得分：0)
@Manish Menaria 的回答存在一些问题，如果我们将白色转换为灰色，则显示为灰色。
所以添加了一些调整，下面的例子具体展示了如何改变材质图标的颜色
<mat-icon class="draft-white" svgIcon="draft" aria-hidden="false"></mat-icon>
.draft-white{
filter: brightness(0) invert(1);
}
答案 25 :(得分：-1)
只需在图像的svg标签中添加fill：“ desiredColor”： 例如：
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
答案 26 :(得分：-1)
使用浏览器打开图像，右键单击图像，然后单击查看页面源，您将看到图像的svg标签。应对并粘贴到您的html中，然后将填充颜色更改为您选择的颜色