我想使用这种技术并更改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 >
当前回答
Method 1 The easy and effect way: Open your .svg file with any text editor <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 /> Give an style attribute and fill that with color. Another way Fill with color in your shape. Here i have rect shape 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>
其他回答
定位'svg'标签内的路径:
<svg>
<path>....
</svg>
你可以内联，比如:
<path fill="#ccc">
Or
svg{
path{
fill: #ccc
只有带有路径信息的SVG。你不能对图像这么做……作为路径，你可以改变笔画和填充信息，你就完成了。比如Adobe Illustrator
所以，通过CSS，你可以覆盖路径填充值:
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>
如果使用一些技巧，可以用CSS改变SVG着色。 我为此写了一个小脚本。
浏览包含SVG图像的元素列表 将SVG文件加载为XML 只获取SVG部分 改变路径颜色 将src替换为修改后的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背景图像的元素实现了这一点，其工作原理几乎类似于此。
但是无论如何，您必须修改这个脚本以适应您的情况。
最简单的技巧是在页面加载时使用jQuery改变颜色。
$(document).ready(function () {
$('svg').find('path').attr('fill', '#FFF');
});
#FFF是你想要设置的颜色代码。
解决方案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%)的前缀，将其首先转换为黑色。
利与弊:
可能会有一个小的，不显著的差异之间的结果和期望的颜色。
合适的如果:
想要的颜色是预先知道的。 外部形象
