Все что нужно сделать для jQuery, что бы он не тупил с SVG
jQuery.extend({
_originalAttr: jQuery.attr,
attr: function(elem, name, value) {
if (typeof SVGElement !== 'undefined' && elem instanceof SVGElement) {
if (typeof value === 'undefined') {
value = elem.getAttribute(name);
} else if (value === null) {
elem.removeAttribute(name);
} else {
elem.setAttribute(name, value + "");
}
return value;
}
return jQuery._originalAttr(elem, name, value);
}
});
тест:
<!DOCTYPE html>
<html lang="en">
<head>
<title>…</title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
jQuery.extend({
_originalAttr: jQuery.attr,
attr: function(elem, name, value) {
if (typeof SVGElement !== 'undefined' && elem instanceof SVGElement) {
if (typeof value === 'undefined') {
value = elem.getAttribute(name);
} else if (value === null) {
elem.removeAttribute(name);
} else {
elem.setAttribute(name, value + "");
}
return value;
}
return jQuery._originalAttr(elem, name, value);
}
});
var inlineSVG = '<svg baseProfile="full" WIDTH="300" HEIGHT="200"><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /></svg>',
tmpContainer = document.createElement('div'),
svgElement;
tmpContainer.innerHTML = inlineSVG;
document.body.appendChild(tmpContainer.firstChild);
tmpContainer = null;
svgElement = jQuery('svg');
alert([
'baseprofile: ' + svgElement.attr('baseprofile'),
'baseProfile: ' + svgElement.attr('baseProfile'),
'width: ' + svgElement.attr('width'),
'height: ' + svgElement.attr('height')
].join('\n'));
</script>
</body>
</html>
