無法在HTML SVG中獲取輸出

Question

我正在做一個需要在圖像上創建可調整大小的矩形的項目。 我發現此Codepen有用：
https://codepen.io/taye/pen/xEJeo

問題是當我在Codepen中編寫相同的代碼時，它無法正常工作。 參見此處https://codepen.io/KushalParikh/pen/rJOeOy 。

你能告訴我我想念的東西嗎？ 我是javascript和svg的新手。 我的密碼

 var svgCanvas = document.querySelector('svg'), svgNS = 'http://www.w3.org/2000/svg', rectangles = []; function Rectangle (x, y, w, h, svgCanvas) { this.x = x; this.y = y; this.w = w; this.h = h; this.stroke = 5; 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); } 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 }; }) .inertia({ // don't jump to the resume location // https://github.com/taye/interact.js/issues/13 zeroResumeDelta: true }) .restrict({ // restrict to a parent element that matches this CSS selector drag: 'svg', // only restrict before ending the drag endOnly: true, // consider the element's dimensions when restricting elementRect: { top: 0, left: 0, bottom: 1, right: 1 } }) .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({ max: Infinity, onmove: function (event) { var rectangle = rectangles[event.target.getAttribute('data-index')]; rectangle.w = Math.max(rectangle.w + event.dx, 10); rectangle.h = Math.max(rectangle.h + event.dy, 10); rectangle.draw(); } }); interact.maxInteractions(Infinity); for (var i = 0; i < 5; i++) { new Rectangle(50 + 100 * i, 80, 80, 80, svgCanvas); } 

 svg { width: 100%; height: 240px; background-color: #2e9; -ms-touch-action: none; touch-action: none; } .edit-rectangle { fill: #92e; stroke: black; } body { margin: 0; } 

 <svg> </svg> 

Answer 1

確實，您的筆無法正常工作。 您忘記將interact.js添加到筆中作為必要的javascript資源。 只需轉到Settings|Javascript然后添加類似https://c4d6f7d727e094887e93-4ea74b676357550bd514a6a5b344c625.ssl.cf2.rackcdn.com/interact-1.1.1.min.js

Answer 2

您需要導入

https://c4d6f7d727e094887e93-4ea74b676357550bd514a6a5b344c625.ssl.cf2.rackcdn.com/interact-1.1.1.min.js

在你的JS里