SVG drop shadow with filters is truncated

Question

I am trying to make a drop shadow for the following SVG shape:

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

After the drop shadow the shape is suppossed to look like this (ignore the bits except for the arrow and its shadow):

I tried the following 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/

What I get is this:

The resulting SVG is coming out truncated. Also, how can I change the opacity of the shadow?

Thanx in advance!

Answer 1

To stop truncating, just make the filter cover the shape (the drop shadow is above and to the left so the filter needs to cover that region).

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

If you want the shadow not to be opaque, something involving a non-opaque flood would seem to do the trick. For a general drop shadow you need something like this...

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

Although, in Firefox and Chrome you can use the SVG Filter Effects <feDropShadow> filter or a CSS drop-shadow filter instead.

Answer 2

This is what I think you're looking for. It expands the filter region, keeps the drop shadow unblurred and dials the opacity on the shadow down to 50%. (I've also found browsers to get crotchety when you don't provide explicit dimensions for inline SVG.)

<svg x="0px" y="0px" width="500px" height="300px" style="overflow:visible;" viewBox="0 0 500 300">
    <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="-50%" y="-100%" width="200%" height="400%">
            <feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
            <feComponentTransfer>
                <feFuncA type="discrete" tableValues="0 .5"/>
            </feComponentTransfer>
            <feComposite operator="over" in="SourceGraphic"/>
        </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>