В этом примере показано, как встроить SVG в XHTML, включая программное создание новых элементов SVG: http://phrogz.net/svg/svg_in_xhtml5.xhtml
В этом примере показано, как использовать XHR для извлечения SVG в виде XML, найти его фрагмент,и два способа преобразовать его в локальный документ перед добавлением узла в существующий документ SVG: http://phrogz.net/svg/fetch_fragment.svg
В общем:
- Не используйте jQuery с SVG напрямую.
- Динамически созданные элементы SVG должны создаваться с использованием
createElementNS, предоставляя URI пространства имен SVG 'http://www.w3.org/2000/svg'.(Обратите внимание, однако, что атрибуты SVG не должны создаваться с пространством имен.) - Вы должны быть уверены, что ваш XHTML будет использоваться как XML (content-type: application / xhtml + xml), а не как текст/html.
Вот функция общего назначения, которую я иногда использую для удобного создания элементов SVG.Он работает как с документами SVG, так и с SVG-in-XHTML, позволяет напрямую создавать текстовое содержимое и поддерживает атрибуты пространства имен (например, xlink:href).
// Example usage:
// var parentNode = findElementInTheSVGDocument();
// var r = createOn( parentNode, 'rect', {
// x:12, width:10, height:10, 'fill-opacity':0.3
// });
function createOn(root,name,attrs,text){
var doc = root.ownerDocument;
var svg = root;
while (svg.tagName!='svg') svg=svg.parentNode;
var svgNS = svg.getAttribute('xmlns');
var el = doc.createElementNS(svgNS,name);
for (var attr in attrs){
if (attrs.hasOwnProperty(attr)){
var parts = attr.split(':');
if (parts[1]) el.setAttributeNS(svg.getAttribute('xmlns:'+parts[0]),parts[1],attrs[attr]);
else el.setAttributeNS(null,attr,attrs[attr]);
}
}
if (text) el.appendChild(document.createTextNode(text));
return root.appendChild(el);
}