我在这里创建了一个示例:
<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>
在Chrome和Firefox中打开它,结果完全不同。我想知道是否有一个公式可以使它们相同,比如“将feComposite元素中的k2属性乘以1.8”,这是一个系统化的公式。如果没有,那么至少有一些关于如何让它看起来像Firefox上的Chrome的建议(我使用Chrome作为我的主要开发浏览器,所以这就是我设计过滤器的地方)。
不幸的是,它是一个很大的过滤器,所以有很多属性需要处理。
1条答案
按热度按时间sq1bmfud1#
看起来Chrome在linearRGB颜色空间中实现的feDiffuseLighting是不正确的(至少在Windows上)。如果你添加“color-interpolation-filters=“sRGB”到你的滤镜元素中,它会把你切换到sRGB颜色空间,并在不同的浏览器中给予你一致的结果。
(FWIW- 这个滤镜比实际需要的要复杂得多-当baseFrequency如此高时,没有必要使用灯光效果-您应该能够使用一两个feColorMatrixes来完成您想要的一切。