由多个 SVG 滤镜组成的 CSS 滤镜使图像更暗
[英]CSS filter composed of multiple SVG filters makes image darker
问题描述
I can apparently chain a sequence of css filters together by simply concatenating them, which seems to work:
我显然可以通过简单地连接它们来将一系列 css 过滤器链接在一起，这似乎有效：
filter: brightness(200%) brightness(200%);
But when the individual filters in question are svg filters, it seems to make the resulting image unexpectedly darker for some reason:但是当有问题的单个过滤器是 svg 过滤器时，由于某种原因，它似乎使生成的图像意外变暗：
filter: url(#myIdentityFilter) url(#myIdentityFilter);
The following image shows this effect (it's from the snippet at the bottom of this post, on chrome 103.0.5060.134):下图显示了这种效果（它来自这篇文章底部的片段，在 chrome 103.0.5060.134 上）：
I've observed this unexpected darkening with many kinds of svg filters, eg feComponentTransfer, feColorMatrix, feDiffuseLighting.我用多种 svg 滤镜观察到这种意外变暗，例如 feComponentTransfer、feColorMatrix、feDiffuseLighting。
@HolgerL mentions this darkening problem in a comment on Multiple Filters for Single Object in SVG (where the method was suggested, in the context of svg rather than html; apparently the same problem happens there too). @HolgerL mentions this darkening problem in a comment on Multiple Filters for Single Object in SVG (where the method was suggested, in the context of svg rather than html; apparently the same problem happens there too).
Should chaining like this work?应该像这样链接工作吗？ I know I can work around the darkening problem, in order to achieve the desired effect, by nesting my element inside a container div, and applying the second filter to the container div instead of chaining it on to the first filter;我知道我可以通过将我的元素嵌套在容器 div 中并将第二个过滤器应用于容器 div 而不是将其链接到第一个过滤器来解决变暗问题，以达到预期的效果； this is similar to what was suggested in Multiple Filters for Single Object in SVG .这类似于SVG 中单个 Object 的多个过滤器中建议的内容。 That works.这样可行。
But I'd like to use the simpler more concise chaining syntax if possible.但如果可能的话，我想使用更简单更简洁的链接语法。
The above image was produced by the following snippet.上面的图像是由以下代码片段生成的。
<;DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html. charset=utf-8" /> <style>:gradientSwatch { display;inline-block: width;64px: height;64px: background-image,linear-gradient(black; white): } </style> </head> <body style="background;#aaaaaa:"> <svg width="0" height="0"> <,-- NOT display,none: which would make filters invisible --> <filter id="identity"> <feComponentTransfer> <:-- no funcs: so should be the identity --> </feComponentTransfer> </filter> </svg> <hr> increasing numbers of brightness(200%) (seems correct): <br> 0; <div class="gradientSwatch"></div> 1: <div class="gradientSwatch" style="filter:brightness(200%);"></div> 2: <div class="gradientSwatch" style="filter:brightness(200%) brightness(200%);"></div> 3: <div class="gradientSwatch" style="filter:brightness(200%) brightness(200%) brightness(200%):"></div> <hr> increasing numbers of brightness(100%) (seems correct): <br> 0; <div class="gradientSwatch"></div> 1: <div class="gradientSwatch" style="filter:brightness(100%);"></div> 2: <div class="gradientSwatch" style="filter:brightness(100%) brightness(100%);"></div> 3: <div class="gradientSwatch" style="filter:brightness(100%) brightness(100%) brightness(100%):"></div> <hr> increasing numbers of url(#identity) (gets unexpectedly darker when 2 or more): <br> 0; <div class="gradientSwatch"></div> 1: <div class="gradientSwatch" style="filter:url(#identity);"></div> 2: <div class="gradientSwatch" style="filter:url(#identity) url(#identity);"></div> 3: <div class="gradientSwatch" style="filter:url(#identity) url(#identity) url(#identity);"></div> <hr> </body> </html>
1 个解决方案
解决方案1
0 2022-09-17 12:54:27
I was running into the same issue and chanced upon this somewhat related answer for SVG Filter: Different colouring depending on browser .我遇到了同样的问题，偶然发现了SVG Filter: Different coloring based on browser的这个有点相关的答案。 It seems that the color-interpolation-filters="sRGB" property could be added to each filter to fix the behavior.似乎可以将color-interpolation-filters="sRGB"属性添加到每个过滤器以修复行为。
I've tried on Chrome with the below and saw that without the property, darkening occurs, with the property, the image is normal.我在 Chrome 上试过下面的，发现没有属性，会变暗，有属性，图像是正常的。
Not sure why the behavior is like that, but this may unblock you.不知道为什么会出现这种行为，但这可能会解除对您的阻止。
<img src="https://i.imgur.com/a0bs8oJ.jpeg"/>
<svg>
<defs>
<filter id="f1" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
<feFlood in="SourceGraphic" x="0.70" y="0.1" width="0.15" height="0.25" />
<feComposite operator="in" in="SourceGraphic"/>
<feColorMatrix type="saturate" values="0"/>
<feComposite operator="over" in2="SourceGraphic"/>
</filter>
<filter id="f2" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
<feFlood in="SourceGraphic" x="0.25" y="0.4" width="0.25" height="0.35" />
<feComposite operator="in" in="SourceGraphic"/>
<feColorMatrix type="saturate" values="0"/>
<feComposite operator="over" in2="SourceGraphic"/>
</filter>
</defs>
</svg>
img {
width: 1000px;
height: 1000px;
filter: url(#f1) url(#f2)
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.