Cela se produit parce que le SVG DOM spec diffère beaucoup de DOM HTML.
SVG DOM est un autre dialecte, et certaines propriétés ont les mêmes noms, mais de signifier des choses différentes. Par exemple, pour obtenir le nom de classe d'un élément svg, vous utilisez:
svg.className.baseVal
Le properites concernés par cela
className is SVGAnimatedString
height,width, x, y, offsetWidth, offsetHeight are SVGAnimatedLength
Ces propriétés Animées sont les structures, avec baseVal le maintien de la même valeur, que vous pouvez trouver dans les DOM HTML et animatedVal la tenue, je ne suis pas sûr de ce que.
SVG DOM est également absente de certains properies les bibliothèques dépendent, tels que innerHTML.
Cela rompt avec jQuery dans beaucoup de façons, tout ce qui dépend des propriétés ci-dessus échoue.
En général, SVG DOM et DOM HTML ne mélangent pas très bien. Ils travaillent ensemble, juste assez pour vous attirer dans, et ensuite les choses se casser tranquillement, et un autre ange perd ses ailes.
J'ai écrit un peu de jQuery extension qui enveloppe les éléments SVG pour les rendre plus comme DOM HTML
function(jQuery){
function svgWrapper(el) {
this._svgEl = el;
this.__proto__ = el;
Object.defineProperty(this, "className", {
get: function(){ return this._svgEl.className.baseVal; },
set: function(value){ this._svgEl.className.baseVal = value; }
});
Object.defineProperty(this, "width", {
get: function(){ return this._svgEl.width.baseVal.value; },
set: function(value){ this._svgEl.width.baseVal.value = value; }
});
Object.defineProperty(this, "height", {
get: function(){ return this._svgEl.height.baseVal.value; },
set: function(value){ this._svgEl.height.baseVal.value = value; }
});
Object.defineProperty(this, "x", {
get: function(){ return this._svgEl.x.baseVal.value; },
set: function(value){ this._svgEl.x.baseVal.value = value; }
});
Object.defineProperty(this, "y", {
get: function(){ return this._svgEl.y.baseVal.value; },
set: function(value){ this._svgEl.y.baseVal.value = value; }
});
Object.defineProperty(this, "offsetWidth", {
get: function(){ return this._svgEl.width.baseVal.value; },
set: function(value){ this._svgEl.width.baseVal.value = value; }
});
Object.defineProperty(this, "offsetHeight", {
get: function(){ return this._svgEl.height.baseVal.value; },
set: function(value){ this._svgEl.height.baseVal.value = value; }
});
};
jQuery.fn.wrapSvg = function() {
return this.map(function(i, el) {
if (el.namespaceURI == "http://www.w3.org/2000/svg" && !('_svgEl' in el)) {
return new svgWrapper(el);
else
return el;
});
};
})(window.jQuery);
Il crée un wrapper autour de SVG objets qui les fait ressembler à DOM HTML pour jQuery. Je l'ai utilisé avec jQuery UI pour faire ma éléments SVG droppable.
Le manque de DOM interopérabilité entre HTML et SVG est un désastre total. Tous les sweet utilité des bibliothèques écrites en HTML doivent être réinventées pour SVG.
