SVG：獲取浮雕效果

我正在嘗試創建一個SVG filter，這將創建Anaglyph效果。到目前爲止我所做的是將一些形狀複製到紅色和藍色的形狀。現在，我想改變這些形狀重疊的方式（不透明度...），以便得到浮雕效果。我怎樣才能做到這一點？你知道另一個可以產生這種效果的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>

來源

2011-06-12 Pierre

好的，我想我找到了答案。額外的過濾器是：

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

來源

2011-06-12 09:45:59 Pierre

SVG：獲取浮雕效果

回答

相關問題