SVG - 同时插入和投影答案

【问题标题】：SVG - Inset and drop shadow at the same timeSVG - 同时插入和投影
【发布时间】：2015-01-26 19:31:47
【问题描述】：

如何将这两个过滤器组合在一起？

<filter y="0%" x="0%" primitiveUnits="objectBoundingBox" id="drop-shadow"> 
   <feGaussianBlur in="SourceAlpha" stdDeviation="0.0012"/> 
   <feOffset dx="0.006" dy="0.013" result="offsetblur"/>
   <feFlood flood-color="black"/>  
   <feComposite in2="offsetblur" operator="in"/> 
   <feMerge> 
      <feMergeNode/> 
      <feMergeNode in="SourceGraphic"/> 
   </feMerge> 
</filter>


<filter id="inset-shadow" primitiveUnits="objectBoundingBox" x="0%" y="0%">
   <feOffset dx="0.01" dy="0.02" />
   <feGaussianBlur stdDeviation="0.01" result="offset-blur" />
   <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" />
   <feFlood flood-color="black" flood-opacity="1" result="color" />
   <feComposite operator="in" in="color" in2="inverse" result="shadow" />
   <feComposite operator="over" in="shadow" in2="SourceGraphic" /> 
</filter> 

<style type="text/css">

#mySvg g {  filter:url(#drop-shadow);  
            filter:url(#inset-shadow); }

</style>

【问题讨论】：

标签： css svg shadow svg-filters

【解决方案1】：

这完全取决于您想要做什么（顺序很重要），但您可以例如将两个过滤器合二为一，如下所示：

<filter id="inset-and-drop-shadow" primitiveUnits="objectBoundingBox" x="0%" y="0%">
    <feOffset dx="0.01" dy="0.02" />
    <feGaussianBlur stdDeviation="0.01" result="offset-blur" />
    <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" />
    <feFlood flood-color="black" flood-opacity="1" result="color" />
    <feComposite operator="in" in="color" in2="inverse" result="shadow" />
    <feComposite operator="over" in="shadow" in2="SourceGraphic" result="inset-shadow" />
    <feGaussianBlur in="SourceAlpha" stdDeviation="0.0012" />
    <feOffset dx="0.006" dy="0.013" result="offsetblur" />
    <feFlood flood-color="black" />
    <feComposite in2="offsetblur" operator="in" />
    <feMerge>
        <feMergeNode/>
        <feMergeNode in="inset-shadow" />
    </feMerge>
</filter>

见fiddle。

【讨论】：