我想使用这种技术并更改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着色:
例如,
滤镜:反色(0.5)棕色(1)饱和(5)色相旋转(175度)
上传和着色您的SVG - Jsfiddle
我的想法来自:在图像标签SVGs上交换填充颜色
其他回答
如果使用一些技巧，可以用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背景图像的元素实现了这一点，其工作原理几乎类似于此。
但是无论如何，您必须修改这个脚本以适应您的情况。
使用浏览器打开图像，右键单击图像，点击查看页面源代码，您将看到图像的svg标记。应付和粘贴到你的html，然后改变填补你所选择的颜色
为了改变SVG元素的颜色，我发现了一种方法，同时检查下面的谷歌搜索框搜索图标:
.search_icon { 颜色:红色; 填充:currentColor; 显示:inline-block; 宽度:100 px; 身高:100 px; ｝ < 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 000 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-。59岁4.23 - -1.57 l.27.28v。79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5 s7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg> . < / span >
我使用了一个span元素“display:inline-block”，高度，宽度和设置一个特定的样式“颜色:红色;到svg子元素继承的span标签。
这里是快速而愤怒的方式:)
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>
带有背景色的框元素上的SVG掩码将导致:
body{ overflow:hidden; } .icon { --size: 70px; display: inline-block; width: var(--size); height: var(--size); transition: .12s; -webkit-mask-size: cover; mask-size: cover; } .icon-bike { background: black; animation: 4s frames infinite linear; -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); } @keyframes frames { 0% { transform:translatex(100vw) } 25% { background: red; } 75% { background: lime; } 100% { transform:translatex(-100%) } } <i class="icon icon-bike" style="--size:150px"></i>
注意- Internet Explorer浏览器不支持SVG掩码
