Working with SVG files dynamically

Asked

Viewed 1,706 times

5

I am developing a web page where I use numerous effects in CSS. among one of them I realized that I can not ultilizar the 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 invert the color of an image and put shade. In Chrome I can do it that 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 shows an effect, sometimes shows another effect, sometimes does not show, as if it depended on which SVG was loaded last and overwrite the first.

how to resolve this impasse?

One of class I use to turn 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 firefox svg

  • There are several ways to add SVG in HTML, can show how you do?

  • @Marcoszolnowski I edited the query and entered the class as requested.

  • 1

    @Leandroluk you can use the jsfiddle to post an example working... tip (:

1 answer

1


Firefox yet does not support CSS filters. Therefore, to increase compatibility, you must create a -webkit-filter to work on Chrome, Safari and other Webkit-based browsers, and an equivalent SVG filter for Firefox (as in your example from .grayscale).

I also couldn’t apply two SVG filters to the same element in Firefox directly. You have two options:

  1. create a filter that combines the two effects (e.g., invert and drop-shadow), or
  2. place the image inside a <div> and apply an SVG filter to <div> (ex.: drop-shadow) and another in 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 tag <filter> into an element <svg> 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>
      <filter id="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>

Browser other questions tagged html5 css3 firefox svg

You are not signed in. Login or sign up in order to post.