filter url() with external svg

Question

I have a vaadin Project and it uses scss. I'm trying to add a svg filter with my scss.

.my-img{
   filter:url(filters.svg#opacityRed)
}

I have an svg file on the same folder as my css file and with all the documentation I read there should be no problem.

As w3schools.com says:

The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Example:

filter: url(svg-url#element-id)

But my scss compiler does not compile. It throws an error like this:

SEVERE: encountered "url(filters.svg#redOpacity)". Was expecting one of: "=" "," ";" "." ")" "and" "or" "not" ":" "#{" "to" "through" "in" "from" <STRING> <NUMBER> <IDENT> <NOT_FUNCTION> <FUNCTION> 
org.w3c.css.sac.CSSParseException: encountered "url(filters.svg#redOpacity)". Was expecting one of: "=" "," ";" "." ")" "and" "or" "not" ":" "#{" "to" "through"

The thing with Vaadin is that is not easy to include my svg filter in the html so I'm looking a way to import it from a file and it seemed that the css filter option was easy.

Otherwise my svg file looks like this

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
    <filter id="redOpacity" color-interpolation-filters="sRGB" x="0" y="0">  
       <feColorMatrix type="matrix"
            values=".50  0  0   0   0.50
                    0.95 0  0   0   0.05
                    0.95 0  0   0   0.05
                    0    0  0   1   0" />
    </filter>
</defs>

Any idea how could I put an url filter in css? Or what is wrong?

EDIT

I found that this is a bug in chromium with this question, it works fine on Firefox, so I had applied the filter to only firefox with a browser hack, changing my css has follows

.my-img{
   -webkit-filter:url(filters.svg#opacityRed)
}

Changing to webkit avoids the compiling error. But eventually I would like to apply the filter in "all" modern browsers.

filter url() with external svg

0 Answers0