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中找到。