<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" style="outline: 1px solid red">
  <style>
    svg {
      overflow: visible;
    }
  </style>

  <filter id="filter1" x="-40" y="-20" width="100" height="200">
    <feOffset in="SourceGraphic" dx="60" dy="60" result="resultOffset" />
    <feGaussianBlur in="resultOffset" stdDeviation="5" result="resultBlur" />
  </filter>

  <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#filter1);" />
</svg>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" style="outline: 1px solid green">
  <filter id="myFilter2" x="-40" y="-20" width="100" height="200">
    <feOffset in="SourceGraphic" dx="60" dy="60" result="resultOffset" />
    <feGaussianBlur in="resultOffset" stdDeviation="5" result="resultBlur" />
    <feMerge>
      <feMergeNode in="resultBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#myFilter2);" />
</svg>