SVG过滤器在Chrome和Firefox中看起来非常不同

j2datikz  于 2023-05-27  发布在  Go
关注(0)|答案(1)|浏览(123)

我在这里创建了一个示例:

<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作为我的主要开发浏览器,所以这就是我设计过滤器的地方)。
不幸的是,它是一个很大的过滤器,所以有很多属性需要处理。

sq1bmfud

sq1bmfud1#

看起来Chrome在linearRGB颜色空间中实现的feDiffuseLighting是不正确的(至少在Windows上)。如果你添加“color-interpolation-filters=“sRGB”到你的滤镜元素中,它会把你切换到sRGB颜色空间,并在不同的浏览器中给予你一致的结果。
(FWIW- 这个滤镜比实际需要的要复杂得多-当baseFrequency如此高时,没有必要使用灯光效果-您应该能够使用一两个feColorMatrixes来完成您想要的一切。

相关问题