英文:
SVG filter looks very different in Chrome vs Firefox
问题
I have created an example here:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg viewBox="0 0 800 200">
<defs>
<filter id="cloth">
<feTurbulence seed="399" type="fractalNoise" baseFrequency="10.797" id="weave"/>
<feColorMatrix type="saturate" values="0"/>
<feComposite operator="arithmetic" k3="4"/>
<feComposite operator="in" in2="SourceGraphic" result="rComp1"/>
<feColorMatrix type="luminanceToAlpha" result="rColor1"/>
<feDiffuseLighting surfaceScale="-10" diffuseConstant="0.5">
<feDistantLight azimuth="225" elevation="20"/>
</feDiffuseLighting>
<feComposite operator="arithmetic" in2="rComp1" k1="1" k2="1" k3="1"/>
<feBlend mode="multiply" in ="rColor1"/>
<feComposite operator="arithmetic" k2="1.2"/>
<feComposite operator="in" in2="rComp1" result="rComp2"/>
<feColorMatrix type="luminanceToAlpha" in ="rComp2" result="rColor2"/>
<feDiffuseLighting surfaceScale="-10" diffuseConstant="0.5" id="surfaceScale">
<feDistantLight azimuth="225" elevation="20"/>
</feDiffuseLighting>
<feComposite operator="arithmetic" in2="rComp2" k1="1" k2="1" k3="2" id="dye"/>
<feBlend mode="multiply" in ="rColor2"/>
<feComposite operator="arithmetic" k2="1.2"/>
<feComposite operator="in" in2="rComp2"/>
</filter>
</defs>
<rect width="800" height="200" filter="url(#cloth)"/>
</svg>
<!-- end snippet -->
Open it in Chrome and Firefox, and the results are quite different. I'm wondering if there is a formula to make them the same, like "multiply the k2 attribute in the feComposite elements by 1.8", something systematic. If not, then at least some suggestions as to how to get it to look like it does on Chrome on Firefox (I use Chrome as my primary dev browser, so that's where I designed the filter).
Unfortunately, it's a big filter, so there are a lot of attributes to fiddle with.
英文:
I have created an example here:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg viewBox="0 0 800 200">
<defs>
<filter id="cloth">
<feTurbulence seed="399" type="fractalNoise" baseFrequency="10.797" id="weave"/>
<feColorMatrix type="saturate" values="0"/>
<feComposite operator="arithmetic" k3="4"/>
<feComposite operator="in" in2="SourceGraphic" result="rComp1"/>
<feColorMatrix type="luminanceToAlpha" result="rColor1"/>
<feDiffuseLighting surfaceScale="-10" diffuseConstant="0.5">
<feDistantLight azimuth="225" elevation="20"/>
</feDiffuseLighting>
<feComposite operator="arithmetic" in2="rComp1" k1="1" k2="1" k3="1"/>
<feBlend mode="multiply" in ="rColor1"/>
<feComposite operator="arithmetic" k2="1.2"/>
<feComposite operator="in" in2="rComp1" result="rComp2"/>
<feColorMatrix type="luminanceToAlpha" in ="rComp2" result="rColor2"/>
<feDiffuseLighting surfaceScale="-10" diffuseConstant="0.5" id="surfaceScale">
<feDistantLight azimuth="225" elevation="20"/>
</feDiffuseLighting>
<feComposite operator="arithmetic" in2="rComp2" k1="1" k2="1" k3="2" id="dye"/>
<feBlend mode="multiply" in ="rColor2"/>
<feComposite operator="arithmetic" k2="1.2"/>
<feComposite operator="in" in2="rComp2"/>
</filter>
</defs>
<rect width="800" height="200" filter="url(#cloth)"/>
</svg>
<!-- end snippet -->
Open it in Chrome and Firefox and the results are quite different. I'm wondering if there is a formula to make them the same, like "multiply the k2 attribute in the feComposite elements by 1.8", something systematic. If not, then at least some suggestions as to how to get it to look like it does on Chrome on Firefox (I use Chrome as my primary dev browser, so that's where I designed the filter).
Unfortunately it's a big filter, so there are a lot of attributes to fiddle with.
答案1
得分: 1
似乎 Chrome 在线性 RGB 色彩空间中的 feDiffuseLighting 实现不正确（至少在 Windows 上）。如果您在滤镜元素中添加 "color-interpolation-filters="sRGB""，它将切换到 sRGB 色彩空间，从而在各个浏览器中获得一致的结果。
（值得一提的是，这个滤镜比必要的复杂得多 - 当 baseFrequency 如此高时，无需使用光照效果 - 您应该能够通过一个或两个 feColorMatrixes 完成您想要的一切。）
英文:
It looks like Chrome's implementation of feDiffuseLighting in the linearRGB color-space is not correct (on Windows at least). If you add "color-interpolation-filters="sRGB" to your filter element, it will switch you to the sRGB color space and give you consistent results cross browser.
(FWIW - this filter is far more complex than it needs to be - there's no need to use lighting effects when the baseFrequency is this high - you should be able to do everything you want with one or two feColorMatrixes.)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论