search

bumbu / svg-pan-zoom

JavaScript library that enables panning and zooming of an SVG in an HTML document, with mouse events or custom JavaScript hooks
https://github.com/ariutta/svg-pan-zoom#demos
BSD 2-Clause "Simplified" License
1.76k stars 389 forks source link

Slow when shapes have filters #377

Open cvharris opened 4 years ago

cvharris commented 4 years ago

Bug report

It seems that applying a filter to shapes drastically impacts performance while panning or zooming. Seems to really be noticeable when multiple shapes have a filter, about a dozen or so. Yet even when there are hundreds of shapes the performance is just fine as long as none of them have a filter. I've recreated the behavior in the pen linked below.

Expected behaviour

Performance has no noticeable difference between using and not using a filter on a shape

Actual behaviour

Performance is noticeably slower when using a filter and is drastically slower if the filter is used on multiple shapes

Steps to reproduce the behaviour

  1. Create an SVG with about a dozen or so shapes like <circle>
  2. Define a filter like <filter id="drop-shadow"><feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" /></filter>
  3. Toggle adding it to the shapes with CSS filter: url(#drop-shadow)
  4. Pan and zoom while a filter is applied vs. while it is not

Configuration