我想使用这种技术并更改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 >
当前回答
只有带有路径信息的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>
其他回答
解决方案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%)的前缀,将其首先转换为黑色。
利与弊:
可能会有一个小的,不显著的差异之间的结果和期望的颜色。
合适的如果:
想要的颜色是预先知道的。 外部形象
我发现它有点笨拙,但它绝对是一种动态改变<img>标记中包含的SVG颜色的工作方式。
在SVG文件中,您可以通过以下方式添加CSS内容:
<svg ...>
<defs>
<style>
...
<style>
<defs>
在这里可以使用@media规则,SVG可以使用该规则查看自身以外的上下文环境。有一个宽高比媒体特性应用于SVG框(例如,<img>标记)。您可以通过稍微拉伸SVG框来为SVG创建不同的上下文。
通过这种方式,您还可以使favicon与网站上出现的SVG相同,但使用不同的颜色。(在这种情况下,其他SVG框不应该是方形的。)
/* img stretched horizontally (if SVG is square-shaped) */
@media (min-aspect-ratio: 1000/999) {
path {
fill: blue;
}
}
/* img stretched vertically (if SVG is square-shaped) */
@media (max-aspect-ratio: 999/1000) {
path {
fill: green;
}
}
/* img with exact sizes */
@media (aspect-ratio: 86/74) {
path {
fill: red;
}
}
/* favicon with light browser theme */
@media (aspect-ratio: 1/1) and (prefers-color-scheme: light) {
path {
fill: black;
}
}
/* favicon with dark browser theme */
@media (aspect-ratio: 1/1) and (prefers-color-scheme: dark) {
path {
fill: white;
}
}
有一点很重要
SVG必须包含viewBox信息,这样拉伸就不会影响图形。例子:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
带有背景色的框元素上的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掩码
最简单的技巧是在页面加载时使用jQuery改变颜色。
$(document).ready(function () {
$('svg').find('path').attr('fill', '#FFF');
});
#FFF是你想要设置的颜色代码。
Manish Menaria的回答有一些问题,如果我们转换白色,它会显示灰色。
所以我添加了一些调整,下面的例子特别展示了如何改变材质图标的颜色:
<mat-icon class="draft-white" svgIcon="draft" aria-hidden="false"></mat-icon>
.draft-white{
filter: brightness(0) invert(1);
}