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 (включая HTML элементов) внутри тега svg игнорируются.

Посмотрите на этих двух JSFiddles:

Correct SVG.
Incorrect SVG with HTML elements.

Они по-прежнему выглядят одинаково, потому что браузер игнорирует эти элементы при рисовании SVG.