Frage

Ich versuche eine zu erstellen SVG -Filter das würde eine schaffen Anaglyphe Wirkung. Was ich bisher getan habe, ist, einige Formen auf einige rote und blaue Formen zu duplizieren. Jetzt möchte ich den Weg (Deckkraft ...) diese Formen überlappen, damit ich den Anaglypheneffekt erhalten kann. Wie kann ich das machen ? Kennen Sie einen anderen SVG -Filter, der diesen Effekt erzeugen würde? Vielen Dank.

<?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>
War es hilfreich?

Lösung

Ok, ich glaube, ich habe die Antwort gefunden. Der zusätzliche Filter war:

     <feComposite operator="arithmetic"
         in="L2"
         in2="R2"
         k1="0.5" k2="0.5" k3="0.5"
         />
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top