代码之家 › 专栏 › 技术社区 › OliverRadini

为什么svg不受过滤器的影响?

svg css

OliverRadini · 技术社区 · 6 年前

This question 要求使用css更改svg的颜色。我原以为可以用一个过滤器来实现这一点,但我遇到了一个问题。

我可以用css过滤器模糊图像,但不能改变颜色。好像是从 this article ,应该可以使用过滤器调整背景图像svg的颜色。我哪里做错了?

.btn-icon {
  border: 1px solid black;
  height: 40px;
  width: 40px;
  padding: 0px;
  background: url("https://image.flaticon.com/icons/svg/1034/1034153.svg");
  background-size: cover;
}

.blur {
  filter: blur(3px)
}

.color {
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

<button class="btn-icon blur"></button>
<button class="btn-icon color"></button>

2 回复 | 直到 6 年前

Paul LeBeau 6 年前

你有两个主要问题:

有个错别字。 .color: 应该是 .color .
如果你 hue-rotate() 黑白图像。你只是得到了同样的黑白图像。#000000就变成了000000。白色也一样。这同样适用于大多数其他CSS过滤器原语。唯一能真正加入任何颜色的是 sepia() 过滤。看来你得跳出不少圈套才能从中获得有用的色彩。

下面是一个示例,其中包含从其他示例中借用的筛选器集。

.btn-icon {
  border: 1px solid black;
  height: 40px;
  width: 40px;
  padding: 0px;
  background: url("https://image.flaticon.com/icons/svg/1034/1034153.svg");
  background-size: cover;
}

.blur {
  filter: blur(3px)
}

.color {
  filter: invert(100%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
 }

<button class="btn-icon blur"></button>
<button class="btn-icon color"></button>

OliverRadini 6 年前

@沙哈尔有这个权利;这与svg是如何组合在一起有关。如果路径上没有填充属性,则无法对图像使用颜色过滤器。下面添加了原始svg,其中一条路径有颜色,另一条没有颜色。

过滤器仅应用于具有fill属性的图像部分。

.btn-icon {
  border: 1px solid black;
  height: 40px;
  width: 40px;
  padding: 0px;
  background: url("https://image.flaticon.com/icons/svg/1034/1034153.svg");
  background-size: cover;
}

.blur {
  filter: blur(3px)
}

.color {
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);
 }
 
 #testSvg {
  width: 40px;
   filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
 }

<button class="btn-icon blur"></button>
<button class="btn-icon color"></button>


<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg id="testSvg" 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 511.874 511.874" style="enable-background:new 0 0 511.874 511.874;" xml:space="preserve">
<g>
	<g>
		<g>
			<path fill="red" d="M490.114,12.813H132.568c-12.012,0.014-21.746,9.748-21.76,21.76v98.62l-16.35-24.525
				c-7.484-11.289-22.535-14.676-34.133-7.68l-33.638,20.224c-11.016,6.464-19.097,16.946-22.545,29.244
				c-12.271,44.681-3.166,121.66,109.824,234.667C203.821,474.885,270.816,499.06,316.99,499.06
				c10.69,0.049,21.339-1.34,31.659-4.13c12.293-3.448,22.775-11.518,29.252-22.519l20.198-33.673
				c6.968-11.589,3.584-26.609-7.68-34.091l-80.546-53.692c-11.049-7.308-25.859-4.905-34.031,5.521l-23.45,30.148
				c-2.451,3.226-6.897,4.166-10.445,2.21l-4.463-2.458c-14.686-8.004-32.964-17.971-69.879-54.886
				c-3.994-3.994-7.612-7.731-11.008-11.307h333.517c11.982,0.009,21.713-9.676,21.76-21.658V34.573
				C511.86,22.561,502.126,12.827,490.114,12.813z M229.318,401.362l4.335,2.381c10.897,6.093,24.614,3.266,32.213-6.639
				l23.45-30.148c2.666-3.396,7.49-4.179,11.093-1.801l80.546,53.692c3.659,2.439,4.759,7.321,2.5,11.093l-20.198,33.673
				c-4.218,7.233-11.071,12.553-19.123,14.848c-40.337,11.093-110.933,1.707-218.078-105.446S9.56,195.273,20.627,154.97
				c2.293-8.051,7.61-14.903,14.839-19.123l33.673-20.207c3.773-2.254,8.652-1.155,11.093,2.5l53.717,80.546
				c2.382,3.602,1.599,8.43-1.801,11.093l-30.157,23.458c-9.903,7.597-12.731,21.311-6.639,32.205l2.389,4.335
				c8.533,15.65,19.14,35.123,57.805,73.779C194.212,382.213,213.677,392.828,229.318,401.362z M494.808,298.526
				c-0.028,2.567-2.127,4.627-4.693,4.608H141.203c-11.083-12.674-20.64-26.604-28.476-41.506l-2.458-4.48
				c-1.96-3.54-1.022-7.982,2.202-10.428l30.157-23.458c10.43-8.17,12.833-22.982,5.521-34.031l-20.275-30.43V34.573
				c-0.014-1.249,0.476-2.451,1.359-3.334c0.883-0.883,2.085-1.373,3.334-1.359h357.547c1.249-0.014,2.451,0.476,3.334,1.359
				c0.883,0.883,1.373,2.085,1.359,3.334V298.526z"/>
			<path d="M460.725,52.323l-142.618,108.16c-4.035,2.932-9.499,2.932-13.534,0L162.008,52.323
				c-3.756-2.849-9.111-2.113-11.959,1.643c-2.849,3.756-2.113,9.111,1.643,11.959l142.583,108.151
				c10.144,7.494,23.989,7.494,34.133,0L471.034,65.925c1.805-1.368,2.992-3.398,3.299-5.642c0.307-2.244-0.29-4.518-1.661-6.321
				C469.824,50.213,464.478,49.48,460.725,52.323z"/>
			<path d="M238.517,174.793l-87.415,93.611c-3.214,3.447-3.025,8.848,0.422,12.062c3.447,3.214,8.848,3.025,12.062-0.422
				l87.416-93.653c2.888-3.484,2.553-8.617-0.762-11.698C246.924,171.612,241.78,171.656,238.517,174.793z"/>
			<path d="M384.728,174.793c-3.214-3.447-8.614-3.637-12.062-0.422c-3.447,3.214-3.637,8.614-0.422,12.062l87.39,93.611
				c3.214,3.447,8.614,3.637,12.062,0.422c3.447-3.214,3.637-8.614,0.422-12.062L384.728,174.793z"/>
		</g>
	</g>
</g>
</svg>