css - SVG - 同时插入和投影

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 .