首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >SVG:获取Anaglyph效果

SVG:获取Anaglyph效果
EN

Stack Overflow用户
提问于 2011-06-12 16:44:37
回答 1查看 642关注 0票数 2

我正在尝试创建一个可以创建Anaglyph效果的SVG filter。到目前为止,我所做的是将一些形状复制到一些红色和蓝色的形状上。现在,我想改变方式(不透明度...)这些形状重叠,所以我可以得到浮雕效果。我该怎么做呢?你知道另一个SVG滤镜可以产生这种效果吗?谢谢。

代码语言:javascript
复制
<?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>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-06-12 17:45:59

好了,我想我找到答案了。额外的过滤器是:

代码语言:javascript
复制
     <feComposite operator="arithmetic"
         in="L2"
         in2="R2"
         k1="0.5" k2="0.5" k3="0.5"
         />
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6321015

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档