在template.phtml中使用interact.js的magento动态多维数据集

我使用interact.js库编写了这段代码，它在chrome、firefox和w3schools上独立运行非常好。问题是，当我从layout.xml调用带有此代码的template.phtml时，magento只渲染一次，因此不允许用户调整多维数据集的大小。

<!-- CSS -->
<style type="text/css">
svg {
  width: 100%;
  height: 300px;
  background-color: #CDC9C9;
  -ms-touch-action: none;
      touch-action: none;
}
.edit-rectangle {
  fill: black;
  stroke: #fff;
}
body { margin: 0; }
</style>
<!-- Content -->
<br>
<svg>
</svg>
<br>
<button onclick="location.href = 'square';" id="previousbutton">Go back</button>
<button onclick="location.href = 'squaresection';" style="float:right" id="nextButton">Proceed to next step</button>
<br>
<br>
<script type="text/javascript" src="interact.js">
</script>
<!-- JavaScript -->
<script type="text/javascript">
var svgCanvas = document.querySelector('svg'),
    svgNS = 'http://www.w3.org/2000/svg',
    rectangles = [];
    labels = [];
    rectNumb = 5;
function Rectangle (x, y, w, h, svgCanvas) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.stroke = 0;
  this.el = document.createElementNS(svgNS, 'rect');
  this.el.setAttribute('data-index', rectangles.length);
  this.el.setAttribute('class', 'edit-rectangle');
  rectangles.push(this);
  this.draw();
  svgCanvas.appendChild(this.el);
}

function Label (x, y, text, svgCanvas){
  this.x = x;
  this.y = y;
  this.text = text;
  this.el = document.createElementNS(svgNS, 'text');
  labels.push(this);
  this.draw();
  svgCanvas.appendChild(this.el);
}
Label.prototype.draw = function () {
  this.el.setAttribute('x', this.x);
  this.el.setAttribute('y', this.y);
  this.el.setAttribute('font-family', "Verdana");
  this.el.setAttribute('font-size', 14);
  this.el.setAttribute('fill', "black");
  this.el.innerHTML = this.text;
}
Rectangle.prototype.draw = function () {
  this.el.setAttribute('x', this.x + this.stroke / 2);
  this.el.setAttribute('y', this.y + this.stroke / 2);
  this.el.setAttribute('width' , this.w - this.stroke);
  this.el.setAttribute('height', this.h - this.stroke);
  this.el.setAttribute('stroke-width', this.stroke);
}
interact('.edit-rectangle')
  // change how interact gets the
  // dimensions of '.edit-rectangle' elements
  .rectChecker(function (element) {
    // find the Rectangle object that the element belongs to
    var rectangle = rectangles[element.getAttribute('data-index')];
    // return a suitable object for interact.js
    return {
      left  : rectangle.x,
      top   : rectangle.y,
      right : rectangle.x + rectangle.w,
      bottom: rectangle.y + rectangle.h
    };
  })
/*
.draggable({
    max: Infinity,
    onmove: function (event) {
      var rectangle = rectangles[event.target.getAttribute('data-index')];
      rectangle.x += event.dx;
      rectangle.y += event.dy;
      rectangle.draw();
    }
  })
*/
 .resizable({
    onstart: function (event) {},
    onmove : function (event) {
      if (event.target.getAttribute('data-index') > 0)
      {
        // Main Rect
        var rectangle = rectangles[event.target.getAttribute('data-index')];
        var rectangle2 = rectangles[event.target.getAttribute('data-index') - 1];
        if (rectangle.w - event.dx > 10 && rectangle2.w + event.dx > 10){
          rectangle.x += event.dx;
          rectangle.w = rectangle.w - event.dx;
          rectangle2.w = rectangle2.w + event.dx;
        }
        rectangle.draw();
        rectangle2.draw();
        var label = labels[event.target.getAttribute('data-index')];
        var label2 = labels[event.target.getAttribute('data-index') - 1];
        label.text = rectangle.w + " mm";
        label2.text = rectangle2.w + " mm";
        label.x = rectangle.x + rectangle.w / 4;
        label2.x = rectangle2.x + rectangle2.w / 4;
        label.draw();
        label2.draw();
      }
    },
    onend  : function (event) {},
    edges: {
      top   : false,     // Disable resizing from top edge. 
      left  : true,      
      bottom: false,      
      right : false       // Enable resizing on right edge
    },
    inertia: false,
    // Width and height can be adjusted independently. When `true`, width and
    // height are adjusted at a 1:1 ratio.
    square: false,
    // Width and height can be adjusted independently. When `true`, width and
    // height maintain the aspect ratio they had when resizing started.
    preserveAspectRatio: false,
    // a value of 'none' will limit the resize rect to a minimum of 0x0
    // 'negate' will allow the rect to have negative width/height
    // 'reposition' will keep the width/height positive by swapping
    // the top and bottom edges and/or swapping the left and right edges
    invert: 'reposition',
    // limit multiple resizes.
    // See the explanation in the @Interactable.draggable example
    max: Infinity,
    maxPerElement: 3,
});
interact.maxInteractions(Infinity);
var positionX = 50,
    positionY = 80,
    width = 80,
    height = 80;
for (var i = 0; i < rectNumb; i++) {
  positionX = 50 + 82 * i;
  new Rectangle(positionX, positionY, width, height, svgCanvas);
}
for (var i = 0; i < rectNumb; i++) {
  positionX = 50 + 82 * i;
  new Label(positionX + width/4, positionY + height + 20, width +" mm", svgCanvas); 
}
</script>

任何关于我可以做些什么来将此代码实现到magento中的建议都将不胜感激。