CODEWITHSUNDEEP
javascripthtmlcsssvgsvg-filters
user2423436
user2423436

Reputation: 33

Referencing an SVG filter in an external file not working

I've been looking around at other questions but to no avail did I find a solution. I feel like I might not be putting the svg file in the correct location for the css/html to access it

Currently, I have this in a .svg file right next to my HTML file.

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

My css file looks like this

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

I might be not giving the correct location of the blur possibly?

Upvotes: 2

Views: 1301

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

If your SVG is not in the HTML file, then you cannot just use url(#blur). You would need to use something like url(my_svg_file.svg#blur).

But if I remember correctly, those sort of external file references don't work properly in all browsers anyway. So you should move the contents of the SVG into the HTML file and leave the CSS as url(#blur).

Upvotes: 2

Wouter
Wouter

Reputation: 430

Not sure what you are trying to do but .blur{} refers to the class blur, not the id blur as used in the filter. For adding CSS to the filter try #blur{} instead.

Upvotes: -1

Related Questions