Принимаемый ответ показывает слишком сложный способ. Как утверждает Форресто в его ответе , « он, кажется, добавляет их в DOM-проводник, но не на экран », и причиной этого являются разные пространства имен для html и svg.
Простейшим обходным решением является «обновление» всего svg. После добавления круга (или других элементов) используйте это:
$("body").html($("body").html());
Это делает трюк.
Или, если хотите, используйте контейнер div:
$("#cont").html($("#cont").html());
И заверните ваш svg внутри контейнера div:
Функциональный пример: http://jsbin.com/ejifab/1/edit
Преимущества этой техники:
$('svg').prepend(' ');
, как вы делаете в jQuery. $("#cont").html($("#cont").html());
, их атрибуты можно редактировать с помощью jQuery. EDIT:
Вышеупомянутый метод работает с «жестко закодированным» или DOM манипулировал (= document.createElementNS и т. д.) только SVG. Если Raphael используется для создания элементов (согласно моим тестам), связь между объектами Рафаэля и SVG DOM нарушается, если используется $("#cont").html($("#cont").html());
. Обходной путь к этому - не использовать $("#cont").html($("#cont").html());
вообще, а вместо него использовать фиктивный документ SVG.
Этот фиктивный SVG является первым текстовым представлением документа SVG и содержит только те элементы, которые необходимы. Если мы хотим, например. чтобы добавить элемент фильтра в документ Рафаэля, манекен может быть чем-то вроде . Текстовое представление сначала преобразуется в DOM с помощью метода jQuery $ ("body"). Append (). И когда элемент (filter) находится в DOM, он может быть запрошен с использованием стандартных методов jQuery и добавлен к основному документу SVG, который создается Raphael.
Почему этот манекен нужен? Почему бы не добавить элемент фильтра строго в созданный документ Рафаэля? Если вы попытаетесь использовать, например. $("svg").append("
, он создается как элемент 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 = ' ';
// Create dummy svg with filter definition
$("body").append('');
// 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());
не работает при использовании Рафаэля. Это будет очень короткий взлом.)