CODEWITHSUNDEEP
google-chromesvgsvg-filters
Jeremy
Jeremy

Reputation: 2709

SVG + Chrome + filter + negative scale

I've found Google Chrome is not displaying SVG elements which have both a negative scale and a filter (e.g. Gaussian blur). Is this a bug?

Minimum non-working example:

<filter id="blur-norm">
    <feGaussianBlur stdDeviation="1 3" />
</filter>
<g id="norms" transform="scale(-0.5)">
    <rect x="-40" y="-50" width="100" height="100" fill="#50aea9" stroke="#355270" stroke-width="5" />
</g>

Comparing this JSFiddle in

In chrome, setting the scale to be a positive number will make the element appear (although incorrectly scaled); alternatively, removing the filter reference will make the element appear (although not blurred).

Am I doing something wrong, or is this a Blink bug?

Upvotes: 1

Views: 502

Answers (2)

user4856389
user4856389

Reputation: 11

I couldn't get Chrome to display any filters until I removed the out of the head section then presto, got all filters displayed.

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101898

Looks like it was reported a few days ago.

https://code.google.com/p/chromium/issues/detail?id=409602

Upvotes: 2

Related Questions