SVG: получение эффекта анаглифа - PullRequest
Новая
       49

SVG: получение эффекта анаглифа

1 голос
/ 12 июня 2011

Я пытаюсь создать фильтр SVG , который бы создал эффект Анаглиф . То, что я сделал до сих пор, - это дублирую некоторые формы на красные и синие. Теперь я хотел бы изменить способ (непрозрачность ...), чтобы эти фигуры перекрывались, чтобы я мог получить эффект анаглифа. Как я могу это сделать ? Знаете ли вы еще один 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>

1 Ответ

1 голос
/ 12 июня 2011

ОК, я думаю, что нашел ответ. Дополнительный фильтр был: 

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