jQuery-ui redimensionnable: le redimensionnement ne fonctionne pas pour un élément SVG créé dynamicment

J’ai un SVG dans un

et je veux le faire glisser et le redimensionner. Quand je crée les éléments statiquement dans le code HTML comme ceci:

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

tout fonctionne. Le est déplacé et redimensionné avec le

, mais lorsque je génère les éléments de manière dynamic, comme ceci:

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

seul le glissement continue de fonctionner à la fois pour le

et le . Le redimensionnement ne fonctionne que pour le

, le ne change pas du tout de taille.

Qu’est-ce qui ne va pas?

SVG est sensible à la casse dans le cas où vous utilisez le cas “viewBox” correct. Dans le cas dynamic, ce n’est pas le cas.

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

devrait être

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