我想使用这种技术并更改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颜色,但到目前为止我还不能这样做。我在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 >
当前回答
例如,在你的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>");
其他回答
只有带有路径信息的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>
如果您有一个具有不同不透明度的单色SVG,您只是想将其着色为不同的颜色,那么可以使用另一种方法:feFlood SVG过滤器。
然而,这个解决方案不像单行CSS那样简单:
它适用于img元素中的svg。 这根本不需要编辑源SVG。 它允许您简单地为SVG选择目标颜色,而不用担心复杂的颜色转换,如色调旋转。
这里有一个例子:
<svg xmins =“http://www.w3.org/2000/svg”width= 0“height= 0”> < defs > <滤镜id=“滤镜”=“用户空间”> <feFlood flood-color="aquamarine" result="flood" /> <feComposite in="洪水" in2="SourceAlpha"运营商="in" /> <过滤器- > < / defs > < / svg > <img style=“过滤器::url: recolourFilter);“width=" src " src=“https://upload.wikimedia.org/wikipedia/commons/commons/vs_vs_svg.svg”
在上面的示例中,我们创建了一个内联SVG来定义过滤器,然后将其应用于图像。在<filter>块中,我们首先通过<feFlood>定义我们想要的填充颜色,然后我们使用源的alpha通道和泛洪颜色创建一个合成图像。最后,通过img元素上的filter CSS属性对整个图像应用过滤器。
我是从Smashing杂志的一篇文章中学到这个技巧的。如果您想了解更多关于SVG筛选器的知识,强烈推荐阅读这本书。
还有一些需要注意的事情:
这个过滤器可以通过CSS filter属性应用于任何HTML元素。 同一过滤器可以在同一页面上重复使用多次。 如果您使用的是内联SVG,则<defs>块可以构成SVG元素的一部分,而过滤器仍然可以应用于整个SVG或选择性元素。这避免了过滤器需要单独的SVG元素。
使用svg <mask>元素。
这比其他解决方案更好,因为:
与原始代码紧密匹配。 工作在IE! 嵌入的映像仍然可以是一个外部的、未修改的文件。 图像甚至不必是SVG。 颜色继承自字体颜色,所以很容易与文本一起使用。 颜色是一个正常的CSS颜色,而不是一个奇怪的过滤器组合。
<svg style="color: green;宽度:96 px;viewBox="0 0 100 100" preserveAspectRatio="none"> < def > <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=" ppngback .png" /> < / >面具 < / def > <rect x="0" y="0" width="100" height="100" style="stroke: none;fill: currentColor" mask="url("#fillMask")"/> < / svg >
https://jsfiddle.net/jamiegl/5jaL0s1t/19/
如果使用一些技巧,可以用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”,然后选择“path”。然后你可以改变'fill'。
.eye-icon-container {
width: 33px;
height: 33px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
:hover {
background-color: #ddf0ff;
}
:active {
background-color: #1d398d;
svg {
path {
fill: #fff;
}
}
}
}