title: SVG drop shadow with filters is truncated
body: <p>I am trying to make a drop shadow for the following SVG shape:</p>
  
  <pre><code>&lt;svg style="overflow:visible; "&gt;
  &lt;defs&gt;
      &lt;marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end"&gt;
          &lt;path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" /&gt;
      &lt;/marker&gt;
  &lt;/defs&gt;
  &lt;path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/WNulp.png" alt="enter image description here"></p>
  
  <p>After the drop shadow the shape is suppossed to look like this (ignore the bits except for the arrow and its shadow):</p>
  
  <p><img src="https://i.stack.imgur.com/33E5Q.png" alt="enter image description here"></p>
  
  <p>I tried the following SVG:</p>
  
  <pre><code>&lt;svg style="overflow:visible; "&gt;
  &lt;defs&gt;
      &lt;marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end"&gt;
          &lt;path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" /&gt;
      &lt;/marker&gt;
      &lt;filter id="f1" x="0" y="0" width="500%" height="500%"&gt;
          &lt;feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" /&gt;
          &lt;feBlend in="SourceGraphic" in2="offOut" mode="normal" /&gt;
      &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;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)"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="http://fiddle.jshell.net/md3rT/" rel="nofollow noreferrer">http://fiddle.jshell.net/md3rT/</a></p>
  
  <p>What I get is this:</p>
  
  <p><img src="https://i.stack.imgur.com/IMdlg.png" alt="enter image description here"></p>
  
  <p>The resulting SVG is coming out truncated.
  Also, how can I change the opacity of the shadow?</p>
  
  <p>Thanx in advance!</p>