SVG feDiffuseLighting滤镜产生的纸张效果

问题描述

我正在尝试通过应用以下方法来实现SVG中形状上的纸上绘画效果：

• 位移过滤器和
• 模糊

在背景上一切正常，但是如果我尝试对前景中的形状应用相同的滤镜，则会在形状本身周围产生怪异的边界，如果形状是路径，情况会更糟。

This是形状上没有过滤器的版本，this是将过滤器应用于旋转的rect的版本，而this是过滤器所在的版本应用于路径。顺便说一句，置换和模糊滤镜似乎只能在Firefox中正常工作。

下面是rect版本的代码。

我可以将漫射照明滤镜应用于没有奇怪边界的形状吗？

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-Syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg66"
   version="1.1"
   viewBox="0 0 1100.20831 1529.16669"
   height="1529.16669mm"
   width="1100.20831mm">
  <Metadata
     id="Metadata63">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </Metadata>

  <filter id='roughpaper' x='0%' y='0%' width='100%' height="102%">
    <feTurbulence type="fractalNoise" baseFrequency="0.2" result='noise' numOctaves="3" />
    <feDiffuseLighting in='noise' out="paper" lighting-color='#ffffff' surfaceScale='2'>
      <fedistantLight azimuth='100' elevation='60' />
    </feDiffuseLighting>

    <feGaussianBlur in="paper" stdDeviation="1.2" result="blurredpaper"/>

    <feComponentTransfer>
      <feFuncA type="linear" slope="0.7"/>
    </feComponentTransfer>    
  </filter>

  <filter id="dispmorph">
    <feMorphology radius="0" in="SourceGraphic" result="morph" />
    <feTurbulence type="turbulence" baseFrequency="0.04 0.04" numOctaves="2" result="turbulence"/>
    <fedisplacementMap in2="turbulence" in="morph" out="turbuled" scale="1" xChannelSelector="B" yChannelSelector="G"/>
    <feGaussianBlur in="turbuled" stdDeviation="0.2" result="blur"/>

    <feTurbulence type="fractalNoise" baseFrequency="0.2" result='noise' numOctaves="3" />
    <feDiffuseLighting in='noise' out="paper" lighting-color='#ffffff' surfaceScale='2'>
      <fedistantLight azimuth='100' elevation='60' />
    </feDiffuseLighting>

    <feGaussianBlur in="paper" stdDeviation="1.2" result="blurredpaper"/>

    <feBlend in="blur" in2="blurredpaper" mode="multiply"/>

  </filter>
  <g id="layer1">
    <rect
       filter="url(#roughpaper)"      
       y="0"
       x="0"
       height="100"
       width="100"
       id="rect92"
       />
    <rect
    transform="rotate(-10 50 100)"
    id="path82"
    y="25"
    x="25"
    height="50"
    width="50"
    filter="url(#dispmorph)"      
    style="fill:#204a87;stroke:none" />
  </g>
</svg>

解决方法

feDisplacementMap的输出和feBlend之间似乎存在交互错误。我可以至少在Chrome / Windows上解决此问题，方法是将feBlend / multiply替换为等效的feComposite / arithmetic k1 = 1

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg66"
   version="1.1"
   viewBox="0 0 1100.20831 1529.16669"
   height="1529.16669mm"
   width="1100.20831mm">
  <metadata
     id="metadata63">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>

  <filter id='roughpaper' x='0%' y='0%' width='100%' height="102%">
    <feTurbulence type="fractalNoise" baseFrequency="0.2" result='noise' numOctaves="3" />
    <feDiffuseLighting in='noise' out="paper" lighting-color='#ffffff' surfaceScale='2'>
      <feDistantLight azimuth='100' elevation='60' />
    </feDiffuseLighting>

    <feGaussianBlur in="paper" stdDeviation="1.2" result="blurredpaper"/>

    <feComponentTransfer>
      <feFuncA type="linear" slope="0.7"/>
    </feComponentTransfer>    
  </filter>

  <filter id="dispmorph">
    <feMorphology radius="0" in="SourceGraphic" result="morph" />
    <feTurbulence type="turbulence" baseFrequency="0.04 0.04" numOctaves="2" result="turbulence"/>
    <feDisplacementMap in2="turbulence" in="morph" out="turbuled" scale="1" xChannelSelector="B" yChannelSelector="G"/>
    <feGaussianBlur in="turbuled" stdDeviation="0.2" result="blur"/>

    <feTurbulence type="fractalNoise" baseFrequency="0.2" result='noise' numOctaves="3" />
    <feDiffuseLighting in='noise' out="paper" lighting-color='#ffffff' surfaceScale='2'>
      <feDistantLight azimuth='100' elevation='60' />
    </feDiffuseLighting>

    <feGaussianBlur in="paper" stdDeviation="1.2" result="blurredpaper"/>

    <feComposite operator="arithmetic" k1="1" in="blur" in2="blurredpaper"/>

  </filter>
  <g id="layer1">
    <rect
       filter="url(#roughpaper)"      
       y="0"
       x="0"
       height="100"
       width="100"
       id="rect92"
       />
    <rect
    transform="rotate(-10 50 100)"
    id="path82"
    y="25"
    x="25"
    height="50"
    width="50"
    filter="url(#dispmorph)"      
    style="fill:#204a87;stroke:none" />
  </g>
</svg>