Working with SVG files dynamically

Question

Working with SVG files dynamically

Navigation

#1 by (1 votes)

4

I'm developing a web page where I use a lot of CSS effects. between one of them I realized that I can not use filters in Firefox. Searching the internet I found some solutions that tell me to use SVG files. The problem is when I need to use 2 filters on the same element, for example reverse the color of an image and put shadow. In Chrome I can do it this way:

div img{
  -webkit-filter: invert(100%) drop-shadow(0.2em 0.1em 0.3em #000);
}

When using 2 SVG in firefox, it buga, sometimes it shows an effect, sometimes it shows another effect, sometimes it does not show, as if it depended on which SVG was last loaded and overlapped the first one.

How to resolve this deadlock?

One of the class I use to transform a black and white image

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(100%);    
    -webkit-filter: grayscale(100%);
}

html5 css3 svg firefox

asked by anonymous 13.12.2013 / 19:33

1 answer

AngularJS + Sharepoint + Rest API How to center one window in the other in GTK?

score 1 · Accepted Answer

Firefox still does not support CSS filters . Therefore, to increase compatibility, you should create -webkit-filter to work in Chrome, Safari, and other WebKit-based browsers, and an equivalent SVG filter for Firefox (as in your .grayscale sample).

I was also unable to apply two SVG filters to a single element in Firefox directly. You have two options:

create a filter that combines the two effects (eg invert and drop-shadow), or

put the image inside a <div> and apply an SVG filter on the <div> (eg drop-shadow) and another one on the image (invert).

For option 1, you can use an SVG file editing program, such as Inkscape . Just import your image, apply the desired filters (menu Filters ), save as SVG, open the file in a text editor and copy the <filter> tag into a <svg> element in your HTML. >

Option 2 can be illustrated by the following example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .invert-shadow {
        /* Firefox */
        filter: url(#invert);
        /* Chrome, Safari */
        -webkit-filter: invert(100%) drop-shadow(0.2em 0.1em 0.3em #000);
      }
      .shadow {
        /* Firefox */
        filter: url(#shadow);
      }
    </style>
  </head>
  <body>
    <div class="shadow">
      <img class="invert-shadow" src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png"/></div><svg><filterid="invert">
        <feColorMatrix in="SourceGraphic" type="matrix" 
          values="-1  0  0 0 1 
                   0 -1  0 0 1 
                   0  0 -1 0 1
                   0  0  0 1 0"/>
      </filter>
      <filter id="shadow">
        <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </svg>
  </body>
</html>