Jquery resize duplicating code ?

Jquery resize duplicating code ?

Hello.

I am having trouble trying to set a height with resize() because every time i resize the screen it adds another svg. I can see why its doing it. It is adding more because it is creating the svg inside the  packagesvg() which is inside the $(window).resize().  but I can't find a way to fix it?


Thanks

This is the code:

The JS file:
  1. function packagesvg() {

      var w = $('.pillar').outerWidth();
      var h = $('.pillar').outerHeight();

      var paper = Raphael("buyingSvg");
      paper.setViewBox(0,0,w,h,true);

  2.   var svg = document.querySelector("svg");

  3.   $('#buyingSvg').css({'border':'2px solid red','width':w+'px','height':h+'px'});
      $(svg).css({'border':'2px solid blue','width':w+'px','height':h+'px'});

  5. }


  1. $(document).ready(function (){
      packagesvg();
      $(window).resize(function() {
        packagesvg();
      });
  2. });


The HTML code

  1. <div class="pillar">
       <div id="buyingSvg"></div>
    </div>


The output is like this at first


  1. <div  id="buyingSvg"  style="border: 2px solid red; width: 190px; height: 538px;" >
    <svg  height="342"  version="1.1"  width="190"  xmlns="http://www.w3.org/2000/svg"  style="overflow: hidden; position: relative; top: -0.333008px; border: 2px solid blue; width: 190px; height: 538px;"  viewBox="0 0 190 538"  preserveAspectRatio="xMidYMid meet" >
    </div>


But when i resize the page it keeps adding more..


  1. <div  id="buyingSvg"  style="border: 2px solid red; width: 190px; height: 538px;" >
    <svg  height="342"  version="1.1"  width="190"  xmlns="http://www.w3.org/2000/svg"  style="overflow: hidden; position: relative; top: -0.333008px; border: 2px solid blue; width: 190px; height: 538px;"  viewBox="0 0 190 538"  preserveAspectRatio="xMidYMid meet" >
  2. <svg  height="342"  version="1.1"  width="190"  xmlns="http://www.w3.org/2000/svg"  style="overflow: hidden; position: relative; top: -0.333008px; border: 2px solid blue; width: 190px; height: 538px;"  viewBox="0 0 190 538"  preserveAspectRatio="xMidYMid meet" >
  3. <svg  height="342"  version="1.1"  width="190"  xmlns="http://www.w3.org/2000/svg"  style="overflow: hidden; position: relative; top: -0.333008px; border: 2px solid blue; width: 190px; height: 538px;"  viewBox="0 0 190 538"  preserveAspectRatio="xMidYMid meet" >
  4. <svg  height="342"  version="1.1"  width="190"  xmlns="http://www.w3.org/2000/svg"  style="overflow: hidden; position: relative; top: -0.333008px; border: 2px solid blue; width: 190px; height: 538px;"  viewBox="0 0 190 538"  preserveAspectRatio="xMidYMid meet" >
  5. <svg  height="342"  version="1.1"  width="190"  xmlns="http://www.w3.org/2000/svg"  style="overflow: hidden; position: relative; top: -0.333008px; border: 2px solid blue; width: 190px; height: 538px;"  viewBox="0 0 190 538"  preserveAspectRatio="xMidYMid meet" >
    </div>



how can i fix this issue?


thanks

Ricky