所有边缘的 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>