CODEWITHSUNDEEP
htmlgoogle-chromesvgsvg-filters
psmyrdek
psmyrdek

Reputation: 119

SVG filters in Chrome 47 stopped working

I have defined my custom svg element with structure like this:

<svg>
  <defs>
    <filter id="myFilter"> ... </filter>
    <pattern id="myPattern"> ... </pattern>
  </defs>
  <rect width="100" height="100" class="myRect"></rect>
</svg>

.myRect {
   filter: url('#myFilter');
}

Everything was working ok, but since Chrome 47 I have missing filter on rect element. What's more interesting, in Opera it's still ok. I've tried to use

-webkit-filter: drop-shadow(...);
filter: drop-shadow(...);

but this solution seems to be working only on svg elements, not on child like line or rect.

Do you have any ideas what happened?

Example: https://jsfiddle.net/7azunrb5/

(I knot that I can append drop-shadow on svg element, but's not my case).

Upvotes: 0

Views: 1740

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The filter is working correctly and doing exactly what you tell it to do. It produces the same result on Firefox. The problem is that, with the way your filter is specified, it won't work the way you want it to.

There are two main issues:

  1. You specify a filter region of x="0" y="0" width="100%" height="100%". This limits the filter region to exactly the same size as your source graphic (the rectangle). So the drop shadow won't be visible. Solution: remove those attributes from the filter.

  2. Your rectangle is the same size as your SVG, so even if you fix problem #1, the drop shadow will still not be visible. Solution, reduce the size of the rectangle, or enlarge the SVG canvas.

Here's a modified version of your SVG to show that everything works if you correct those two issues.

.myRect{
  filter: url('#drop-shadow');
  /* filter: drop-shadow(2px 2px 2px black); works in FF*/
}

svg {
  border: solid 1px green;
}
<svg height="100" width="100"> 
  <defs> 
    <filter color-interpolation-filters="auto" id="drop-shadow">
      <feOffset dx="5" dy="3" in="SourceAlpha" result="offOut"></feOffset>
      <feGaussianBlur stdDeviation="3" in="offOut" result="blurOut"></feGaussianBlur>
      <feBlend mode="normal" in2="blurOut" in="SourceGraphic"></feBlend></filter>
  </defs> 
  <rect x="10" y="10" width="80" height="80" class="myRect"></rect>
</svg>

Upvotes: 4

Related Questions