title: SVG filter makes path disappear on Firefox/Safari/iOS
body: <p>Ok, I am trying to apply a filter to an SVG path to make it "glow", I have got it working fine in chrome, but it does not appear to work in Safari/firefox.</p>
  
  <p>I am defining the filters in another SVG as the one the paths are in is generated by an external library (leaflet.js)</p>
  
  <p>Here is simplified test version:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;svg style="position: absolute; top: -20px; width:0;height:0" id="svgFilters" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
   &lt;defs id="svgFilters"&gt;
    &lt;filter id='testFilter' filterRes="10 10" x="-20%" y="-20%" width="140%" height="140%"
      filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"&gt;
     &lt;feComposite in="SourceAlpha" in2="SourceAlpha" operator="arithmetic" k1="0" k2="8" k3="-0.5" k4="-0.5" x="0%" y="0%" width="100%" height="100%" result="composite"/&gt;
     &lt;feColorMatrix type="matrix" values="1 0 0 0 1
       0 1 0 0 0
       0 0 1 0 0
       0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="composite" result="colormatrix1"/&gt;
     &lt;feMorphology operator="dilate" radius="10 10" x="0%" y="0%" width="100%" height="100%" in="colormatrix1" result="morphology1"/&gt;
     &lt;feGaussianBlur stdDeviation="10 10" x="0%" y="0%" width="100%" height="100%" in="morphology1" edgeMode="none" result="blur2"/&gt;--&gt;
     &lt;feComposite in="blur2" in2="composite" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite2"/&gt;
     &lt;feMerge x="0%" y="0%" width="100%" height="100%" result="merge"&gt;
      &lt;feMergeNode in="composite2"/&gt;
      &lt;feMergeNode in="SourceGraphic"/&gt;
     &lt;/feMerge&gt;
    &lt;/filter&gt;
   &lt;/defs&gt;
  &lt;/svg&gt;
  
  
  &lt;svg width="400" height="200" viewBox="0 -500 500 100" &gt;
   &lt;g&gt;
    &lt;path
     stroke="#ff0000"
     stroke-opacity="1"
     stroke-width="3"
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-dasharray="8, 6"
     stroke-dashoffset="0"
     filter="url(#testFilter)"
     fill="green"
     fill-opacity="0.2"
     fill-rule="evenodd"
     d="M211 -552L106 -483L245 -512L273 -431L271 -517zM215 -541L192 -523L238 -521L242 -525z"&gt;
    &lt;/path&gt;
   &lt;/g&gt;
   &lt;defs&gt;
    &lt;pattern id="./img/map/greenstripedBG.png51362524558747380820" x="0" y="0" patternUnits="userSpaceOnUse" width="32" height="32"&gt;
     &lt;rect width="24" height="24" x="0" fill="#ff0000"&gt;&lt;/rect&gt;
     &lt;image x="0" y="0" xlink:href="./img/map/greenstripedBG.png" width="32" height="32"&gt;&lt;/image&gt;
    &lt;/pattern&gt;
   &lt;/defs&gt;
  &lt;/svg&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I do not apply the filter, the path shows up fine, but the second I try to apply it, the path is not visible in safari/firefox</p>