jQuery的附加引導glyphicon爲SVG

Question

我想一個glyphicon追加到使用SVG：

$('.svgname').append('<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-trash"></span> Trash</button>'); 

它體現在，當我使用的開發工具，但實際上並沒有出現在頁面上的SVG。我沒有看到任何直接幫助我的問題。

我在做什麼錯？

Answer 1

它正確地附加到DOM，但它不會顯示在頁面上，因爲SVG元素不應該包含HTML元素。

SVG是用於描述這樣的SVG圖形元素的容器：

<svg width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> 
</svg> 

svg標籤內的任何非SVG元素（包括HTML元素）被忽略。

看看這兩個JSFiddles：

Correct SVG。
Incorrect SVG with HTML elements。

它們仍然看起來相同，因爲瀏覽器在繪製SVG時會忽略這些元素。