Question

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

<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>

Answer 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。

SVG - 同时插入和投影

1 个答案: