SVG: Einen Anaglypheneffekt erhalten
-
27-10-2019 - |
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>
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