带过滤器的SVG阴影被截断

Question

我正在尝试为以下SVG形状制作投影:

<svg style="overflow:visible; ">
<defs>
    <marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end">
        <path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" />
    </marker>
</defs>
<path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4"/>
</svg>

在阴影之后,形状被假定为这样(忽略除箭头及其阴影之外的位):

我尝试了以下SVG:

<svg style="overflow:visible; ">
<defs>
    <marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end">
        <path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" />
    </marker>
    <filter id="f1" x="0" y="0" width="500%" height="500%">
        <feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
        <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
</defs>
<path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4" filter="url(#f1)"/>
</svg>

http://fiddle.jshell.net/md3rT/

我得到的是这个:

生成的SVG将被截断.另外,如何更改阴影的不透明度？

Thanx提前!

Answer 1

要停止截断,只需使过滤器覆盖形状(阴影位于上方和左侧,因此过滤器需要覆盖该区域).

    <filter id="f1" x="-180%" y="-500%" width="500%" height="1000%">
        <feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
        <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>

如果你想让阴影不透明,那么涉及非透明洪水的东西似乎可以解决问题.对于一般的投影你需要这样的东西......

<feGaussianBlur in="alpha-channel-of-feDropShadow-in" stdDeviation="stdDeviation-of-feDropShadow"/> 
  <feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow" result="offsetblur"/> 
  <feFlood flood-color="flood-color-of-feDropShadow" flood-opacity="flood-opacity-of-feDropShadow"/> 
  <feComposite in2="offsetblur" operator="in"/> 
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="in-of-feDropShadow"/> 
  </feMerge>

虽然,在Firefox和Chrome中,您可以使用SVG滤镜效果 <feDropShadow>滤镜或CSS阴影滤镜.