jQuery-ui resizable：resize不适用于动态创建的SVG元素

我在

有一个SVG ，想要拖动它并resize。 当我在HTML中静态创建元素时，如下所示：

        $(document).ready(function() { $('div').draggable({ handle: 'rect' }).resizable({ aspectRatio: 1.0 }); });    
    
  

一切正常。 与

一起拖动并resize，但是当我动态生成元素时：

        $(document).ready(function() { $('body').append('
'); var svg = document.createElementNS('http://www.w3.org/2000/svg', "svg"); svg.setAttributeNS(null, "viewbox", "0 0 400 400"); $('div').append(svg); var square = document.createElementNS('http://www.w3.org/2000/svg', "rect"); square.setAttributeNS(null, "width", "200"); square.setAttributeNS(null, "height", "200"); square.setAttributeNS(null, "x", "0"); square.setAttributeNS(null, "y", "0"); square.setAttributeNS(null, "style", "fill:#FF0000"); $('svg').append(square); $('div').draggable({ handle: 'rect' }).resizable({ aspectRatio: 1.0 }); });      

只有拖动才能继续为

和 。 resize仅适用于

， 根本不会改变大小。

怎么了？

Answer 1

在使用正确的“viewBox”情况的静态情况下，SVG区分大小写。 在动态情况下，你没有。

  svg.setAttributeNS(null, "viewbox", "0 0 400 400"); 

应该

  svg.setAttributeNS(null, "viewBox", "0 0 400 400");