SVG/XML中有一些innerHTML替换吗？

Question

在HTML中，我可以通过以字符串形式提供模板来构建一个简单的模板系统，替换它的某些部分，然后使用innerHTML将它分配给某个容器。

var templ = '<span>{myText}</span>' 
var newContent = templ.replace('{myText}', someVariable); 
document.querySelector('#myContainer').innerHTML = newContent; 

这样我可以利用浏览器的HTML解析器，并没有重复使用document.createElement()。如果模板增长超过几个元素，后者可能非常麻烦。

但是，在SVG中，对于这个问题，元素没有innerHTML甚至innerSVG的属性。

所以我的问题是：有什么我可以在SVG中使用ro类似于上面的例子的方法，或者我坚持与document.createElement()（或分别使用它的一些lib）？

_{一如既往的我的问题：香草JavaScript解决方案是首选，但任何指向提供解决方案的lib的指针表示赞赏。}

Answer 1

可以使用的DOMParser来解析XML：https://developer.mozilla.org/en/Parsing_and_serializing_XML那么你可以使用importNode来获取到您现有的文件，如果你想：https://developer.mozilla.org/en/DOM/document.importNode结束了这样的事情...

var doc = new DOMParser().parseFromString(
    '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="20"/></svg>', 
    'application/xml'); 

someElement.appendChild(
someElement.ownerDocument.importNode(doc.documentElement, true)); 

Answer 2

使用jQuery，你可以这样说：

我们假设你的svgString包含更换操作后，你的SVG图像。

$(svgString)[0]创建与您的字符串对应的svg标签。然后你可以在dom中想要的位置添加这个元素来绘制图像。

我希望这有助于

Answer 3

简短的回答是“不，在XML的世界中没有任何等价物可以让你给它一些标记，并让它自动创建所有的元素和属性在适当的名称空间中插入的位置它。”

最接近的直接答案是@罗伯特有什么。正如我的评论中指出的那样，即使这样，您仍然需要在SVG文档中创建与您要插入片段的文档具有相同名称空间和前缀的片段。

相反，你可能会发现它是那么容易（或容易）使用的便捷方法的标准DOM方法：

// Create a named SVG element on a node, with attributes and optional text 
function appendTo(node,name,attrs,text){ 
    var p,ns=appendTo.ns,svg=node,doc=node.ownerDocument; 
    if (!ns){ // cache namespaces by prefix once 
    while (svg&&svg.tagName!='svg') svg=svg.parentNode; 
    ns=appendTo.ns={svg:svg.namespaceURI}; 
    for (var a=svg.attributes,i=a.length;i--;){ 
     if (a[i].namespaceURI) ns[a[i].localName]=a[i].nodeValue; 
    } 
    } 
    var el = doc.createElementNS(ns.svg,name); 
    for (var attr in attrs){ 
    if (!attrs.hasOwnProperty(attr)) continue; 
    if (!(p=attr.split(':'))[1]) el.setAttribute(attr,attrs[attr]); 
    else el.setAttributeNS(ns[p[0]]||null,p[1],attrs[attr]); 
    } 
    if (text) el.appendChild(doc.createTextNode(text)); 
    return node.appendChild(el); 
} 

function clear(node){ 
    while (node.lastChild) node.removeChild(node.lastChild); 
} 

有了这个，你可以做这样的事情：

var icons={ 
    Apps : "/images/apps.png", 
    Games : "/images/games.png" 
} 
var wrap = document.querySelector('#container'); 
clear(wrap); 

for (var label in icons){ 
    if (!icons.hasOwnProperty(label)) continue; 
    var icon = appendTo(wrap,'g',{'class':'icon'}); 
    appendTo(icon,'image',{'xlink:href':icons[label]}); 
    appendTo(icon,'text',{x:10,y:20},label); 
} 

这是恕我直言，比尝试使用字符串连接构造原始SVG标记更清洁：

var svg = []; 
for (var label in icons){ 
    if (!icons.hasOwnProperty(label)) continue; 
    svg.push('<g class="icon">'); 
    svg.push('<image xlink:href="'+icons[label]+'" />'); 
    svg.push('<text x="10" y="20">'+label+'</text>'); 
    svg.push('</g>'); 
} 
wrap.innerSVG = svg.join(''); // doesn't work, of course 

Answer 4

C剔除了innerSVG javascript填充程序，它提供了您想要的功能。

2014更新：的DOM parsing spec上Element，这使得这些可用对SVG和XML元素定义innerHTML和outerHTML。这已经在Blink出货一段时间了，支持这个的第一个版本是Chrome 32/Opera 19，更多详细信息可以在this bugreport中找到。