所有SVG斜角效果边缘

Question

#logo { 
 
    position:relative; 
 
    left:20px; 
 
    top:20px 
 
} 
 
#logo .container { 
 
    height:200px; 
 
    width:200px; 
 
    top:50px; 
 
    left:50px 
 
} 
 
#logo .container, #logo .slice { 
 
    position:absolute; 
 
} 
 
#logo .slice { 
 
    height:100%; 
 
    width:100%; 
 
}

<div id="logo"> 
 
    <div class="container"> 
 
    <div class="slice" id="one"> 
 
     <svg height="200" width="200"> 
 
     <polygon points="0,200 100,100 200,200" style="fill:green" /> 
 
     </svg> 
 
    </div> 
 
    <div class="slice" id="two"> 
 
     <svg height="200" width="200"> 
 
     <polygon points="0,0 100,100 0,200" style="fill:blue" /> 
 
     </svg> 
 
    </div> 
 
    <div class="slice" id="three"> 
 
     <svg height="200" width="200"> 
 
     <polygon points="0,0 100,100 200,0" style="fill:red" /> 
 
     </svg> 
 
    </div> 
 
    <div class="slice" id="four"> 
 
     <svg height="200" width="200"> 
 
     <polygon points="200,0 100,100 200,200" style="fill:yellow" /> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
</div>

我无法弄清楚如何使一个斜角滤镜为this标志。每个切片的所有三个边缘必须与光源正好投射到每个切片上方一样深。简而言之，我期待的结果与链接中的徽标完全相同。

编辑：

<svg> 
 
    <filter id="inset-shadow"> 
 
    <feComponentTransfer in=SourceAlpha> 
 
     <feFuncA type="table" tableValues="1 0" /> 
 
    </feComponentTransfer> 
 
    <feGaussianBlur stdDeviation="5" /> 
 
     <feOffset in="offsetblur2" dy="10" result="offsetblur" /> 
 
     <feOffset dy="-10" result="offsetblur2" /> 
 
    <feFlood flood-color="rgb(20, 0, 0)" result="color" /> 
 
    <feComposite in2="offsetblur" operator="in" /> 
 
    <feComposite in2="SourceAlpha" operator="in" /> 
 
    <feMerge> 
 
     <feMergeNode in="SourceGraphic" /> 
 
     <feMergeNode /> 
 
    </feMerge> 
 
    </filter> 
 
    <polygon points="0,0 100,100 200,0" style="fill:red" filter="url(#inset-shadow)" /> 
 
</svg>

像这样的事情，但也许还不够深？

Answer 1

下面是一个使用高光滤波器斜角效果：

<svg width="800px" height="600px" viewBox="0 0 200 150" 
 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 

 
    <defs> 
 
    <filter id="MyFilter" height="220%"> 
 
     <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> 
 
     <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
 
          specularExponent="30" lighting-color="white" 
 
          result="specOut"> 
 
     <fePointLight x="100" y="75" z="200"/> 
 
     </feSpecularLighting> 
 
     <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> 
 
     <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
 
        k1="1" k2="1" k3="0" k4="0"/> 
 

 
    </filter> 
 
    </defs> 
 
    
 
    <rect x="1" y="1" width="600" height="800" fill="#888888" stroke="red" /> 
 
    <g filter="url(#MyFilter)" > 
 
     <path fill="#D90000" 
 
      d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> 
 
    </g> 
 
    </g> 
 
</svg>

但是你可以做同样的事情，更优雅的只是用复合材料和模糊。

<svg width="800px" height="600px" viewBox="0 0 200 150" 
 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 

 
    <defs> 
 
    <filter id="MyFilter" height="220%"> 
 
     <feFlood flood-color="black"/> 
 
     <feComposite operator="out" in2="SourceGraphic"/> 
 
     <feGaussianBlur stdDeviation="5"/> 
 
     <feComposite operator="atop" in2="SourceGraphic"/> 
 
    </filter> 
 
    </defs> 
 
    
 
    <rect x="1" y="1" width="600" height="800" fill="#888888" stroke="red" /> 
 
    <g filter="url(#MyFilter)" > 
 
     <path fill="#D90000" 
 
      d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> 
 
    </g> 
 
    </g> 
 
</svg>