SVG:获得立体效果

Question

我正在尝试创建一个 SVG filter这将创建一个 Anaglyph影响。到目前为止我所做的是将一些形状复制为一些红色和蓝色的形状。现在，我想改变这些形状重叠的方式(不透明度...)，以便获得浮雕效果。我怎样才能做到这一点 ？你知道另一个可以产生这种效果的 SVG 过滤器吗？谢谢。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="744.09448819"
   height="1052.3622047"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.1 r9760"
   >

  <defs>
    <filter id="F1" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">


        <feOffset in="SourceAlpha" dx="10" dy="0" result="L1"/>
        <feOffset in="SourceAlpha" dx="-10" dy="0" result="R1"/>


         <feComponentTransfer  in="L1" result="L2">
            <feFuncR type="table" tableValues="1 1 1 1"/>
            <feFuncG type="table" tableValues="0 0 0 1"/>
            <feFuncB type="table" tableValues="0 0 0 1"/>
         </feComponentTransfer>

         <feComponentTransfer  in="R1" result="R2">
            <feFuncR type="table" tableValues="0 0 0 1"/>
            <feFuncG type="table" tableValues="0 0 0 1"/>
            <feFuncB type="table" tableValues="1 1 1 1"/>
         </feComponentTransfer>

        <feMerge>
            <feMergeNode in="L2"/>
            <feMergeNode in="R2"/>
        </feMerge>
    </filter>
  </defs>


  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
     <g filter="url(#F1)" style="stroke-opacity:0.5;">
    <rect
       style="opacity:1;fill:#5d7cd5;fill-opacity:1;stroke:#ca0000;stroke-width:10.80000019;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="rect2987"
       width="234.28572"
       height="168.57143"
       x="120"
       y="260.93362" />
    <rect
       style="opacity:1;fill:#008080;fill-opacity:1;stroke:#ca0000;stroke-width:10.80000019000000044;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="rect2989"
       width="174.28572"
       height="162.85715"
       x="245.71428"
       y="369.50504" />
    <rect
       style="opacity:1;fill:#aa4400;fill-opacity:1;stroke:#ca0000;stroke-width:10.80000019000000044;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="rect2991"
       width="257.14285"
       height="168.57143"
       x="348.57144"
       y="483.79074" />
    <rect
       style="opacity:1;fill:#6c5353;fill-opacity:1;stroke:#ca0000;stroke-width:10.80000019;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="rect2993"
       width="422.85715"
       height="225.71428"
       x="285.71429"
       y="226.6479" />
       </g>
  </g>
</svg>

Answer 1

好的，我想我找到了答案。附加过滤器是:

     <feComposite operator="arithmetic"
         in="L2"
         in2="R2"
         k1="0.5" k2="0.5" k3="0.5"
         />