В принятом ответе показан слишком сложный способ. Как утверждает Форресто в своем ответе , « кажется, что он добавляет их в проводнике DOM, но не на экране », и причиной этого являются разные пространства имен для html и svg.
Самый простой обходной путь - «обновить» весь svg. После добавления круга (или других элементов) используйте это:
$("body").html($("body").html());
Это делает трюк. Круг на экране.
Или, если хотите, используйте контейнер div:
$("#cont").html($("#cont").html());
И заверните свой svg в контейнер div:
<div id="cont">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</div>
Функциональный пример:
http://jsbin.com/ejifab/1/edit
Преимущества этой техники:
- Вы можете редактировать существующий svg (который уже есть в DOM), например. создан с использованием Raphael или как в вашем примере "жестко запрограммирован" без сценариев.
- Вы можете добавлять сложные элементные структуры в виде строк, например.
$('svg').prepend('<defs><marker></marker><mask></mask></defs>'); как вы делаете в jQuery.
- после добавления и отображения элементов на экране с помощью
$("#cont").html($("#cont").html()); их атрибуты можно редактировать с помощью jQuery.
EDIT:
Вышеупомянутая техника работает только с SVG "жестко запрограммированным" или DOM-манипулированием (= document.createElementNS и т. Д.). Если для создания элементов используется Raphael, то (согласно моим тестам) связь между объектами Raphael и SVG DOM нарушается, если используется $("#cont").html($("#cont").html());. Обходной путь к этому - вообще не использовать $("#cont").html($("#cont").html());, а вместо него использовать фиктивный документ SVG.
Этот фиктивный SVG является вначале текстовым представлением документа SVG и содержит только необходимые элементы. Если мы хотим, например. чтобы добавить элемент фильтра к документу Raphael, пустышка может выглядеть примерно так: <svg id="dummy" style="display:none"><defs><filter><!-- Filter definitons --></filter></defs></svg>. Текстовое представление сначала преобразуется в DOM с помощью метода jQuery $ ("body"). Append (). А когда элемент (filter) находится в DOM, его можно запрашивать с помощью стандартных методов jQuery и добавлять к основному документу SVG, который создан Raphael.
Зачем нужен этот манекен? Почему бы не добавить элемент фильтра строго в документ, созданный Рафаэлем? Если вы попробуете, используя, например. $("svg").append("<circle ... />"), он создан как элемент html, и на экране ничего нет, как описано в ответах. Но если весь документ SVG добавляется, браузер автоматически обрабатывает преобразование пространства имен всех элементов в документе SVG.
Пример просветления техники:
// Add Raphael SVG document to container element
var p = Raphael("cont", 200, 200);
// Add id for easy access
$(p.canvas).attr("id","p");
// Textual representation of element(s) to be added
var f = '<filter id="myfilter"><!-- filter definitions --></filter>';
// Create dummy svg with filter definition
$("body").append('<svg id="dummy" style="display:none"><defs>' + f + '</defs></svg>');
// Append filter definition to Raphael created svg
$("#p defs").append($("#dummy filter"));
// Remove dummy
$("#dummy").remove();
// Now we can create Raphael objects and add filters to them:
var r = p.rect(10,10,100,100);
$(r.node).attr("filter","url(#myfilter)");
Полная рабочая демонстрация этой техники здесь: http://jsbin.com/ilinan/1/edit.
(Я (пока) понятия не имею, почему $("#cont").html($("#cont").html()); не работает при использовании Рафаэля. Это был бы очень короткий взлом.)