CODEWITHSUNDEEP
jquerycssd3.jssvg
Jerry
Jerry

Reputation: 1007

svg filter not working in mozilla firefox after zoom

I have a dynamic d3.js tree and I am applying glow filter to elements on click. When I zoom the tree and click on any node, elements are getting hidden instead of highlighting. This is happening only in Firefox. In chrome it is working fine.

<filter id="yellow-glow" x="-5000" y="-5000" width="10000" height="10000" filterUnits="userSpaceOnUse">
  <feFlood result="flood" flood-color="yellow" flodd-opacity="1"/>  
  <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"/>
  <feMorphology in="mask" result="dilated" operator="dilate" radius="2"/>
  <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"/>
  <feMerge><feMergeNode in="blurred"/>
  <feMergeNode in="SourceGraphic"/></feMerge>

Here is the working demo

Upvotes: 1

Views: 104

Answers (1)

kennytm
kennytm

Reputation: 523584

It works fine when you reduce the filter's dimensions 

<filter id="yellow-glow" x="-500" y="-500" width="1000" height="1000"

I guess something is overflowing in Firefox's SVG renderer. You may want to file a bug to Mozilla.

Upvotes: 1

Related Questions