Pan Zoom controls reset after object data update

[bxlxux]

I'm using the svg-pan-zoom in a form-group form-control with 5 possible svg selections. The controls load fine in the initial window load, but after a new option is selected from the dropdown the svg-pan-zoom controls do not reload. Is there a way to have svg-pan-zoom reload after another option is selected?

html...

<div class="form-group">
 <label for="trendSelection">Select a seasonal trend</label>
  <select class="form-control" id="trendSelection" onChange="jsDropDown('svg-id','trends',this.value)">
   <option>Spring</option>
   <option>Summer</option>
   <option>Fall</option>
   <option>Winter</option>
   <option selected>Annual</option>
  </select>
</div>
<div class="embed-responsive embed-responsive-16by9">
 <object id="svg-id" class="embed-responsive-item" type="image/svg+xml" data="trends/Annual.svg">
 </object>
</div>

Javascript

<script language="Javascript">
 function jsDropDown (svgid,folder,newsvg){
        document.getElementById(svgid).data= folder + "/" + newsvg + ".svg";
        }
</script>

<script type="text/javascript"> 
 window.onload = function() {
 var panZoom = window.panZoom = svgPanZoom ('#svg-id', {
          zoomEnabled: true,
          controlIconsEnabled: true,
          maxZoom: 3,
          fit: 1,
          center: 1,
          beforePan: beforePan,
          customEventsHandler: eventsHandler
        });
};
</script>

[bumbu]

Duplicate of #107 svgPanZoom does not look for data updates. I would recommend creating new objects each time you change select options.