CODEWITHSUNDEEP
cssfirefoxsvg
vals
vals

Reputation: 64164

svg blur filter not working in firefox

I am trying to use a blur svg filter as an external file, and link it thru an CSS property.

I can do that succesfully with a colorMatrix filter, but when I change it to GaussianBlur the image disappears.

The HTML and CSS are very easy

<div class="demo">
     <img src="./frost_files/demo.jpg"></img>   
</div>

.demo {
    filter: url(blur.svg#blur);
}

And the file blur.svg contains:

<svg version="1.1" height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
      <feGaussianBlur stdDeviation="1"/>
    <filter>
</svg>

The svg file that does work contains:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grey">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
</svg>

I have seen this answer: filter:blur for mozilla firefox not working (That's why I added height="0"). I have tried all the posible combinations of namespacing, svg:svg, svg:filter, svg:feGaussianBur, etc, but didn't fix the problem.

Upvotes: 0

Views: 7684

Answers (2)

Robert Longson
Robert Longson

Reputation: 123985

You've written the XML filter close tag </filter> as <filter> i.e. another open. All you need is that one character change on the penultimate line...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
      <feGaussianBlur stdDeviation="1"/>
    </filter>
</svg>

Upvotes: 3

G-Cyrillus
G-Cyrillus

Reputation: 105853

You have two mistakes:

  1. url to the filter
  2. name-space in front of filter

http://codepen.io/gcyrillus/pen/vnlEL 

<svg   xmlns="http://www.w3.org/2000/svg">
<filter id="blur1">
        <feGaussianBlur stdDeviation="3"/>
     </filter>
</svg>

.demo{
    filter: url('#blur1');
  float:left;
}

.demo2{
    filter: url('#grey');
}

Upvotes: 0

Related Questions