Додаток jquery не працює з елементом svg?

Якщо припустити це:

<html>
<head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
 });
 </script>
</head>
<body>
 <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>
</body>

Чому я нічого не бачу?

Коли ви передаєте рядок розмітки $, вона аналізується як HTML, використовуючи innerHTMLвластивість браузера в <div>(або іншому підходящому контейнері для спеціальних випадків, таких як <tr>). innerHTMLне може проаналізувати SVG чи інший не HTML-вміст, і навіть якщо він не міг би сказати, що <circle>він повинен бути у просторі імен SVG.

innerHTMLнедоступний у SVGElement - це властивість лише HTMLElement. Наразі немає innerSVGвластивості чи іншого способу (*) для розбору вмісту у SVGElement. З цієї причини слід використовувати методи у стилі DOM. jQuery не дає вам легкого доступу до методів простору імен, необхідних для створення елементів SVG. Дійсно jQuery взагалі не призначений для використання з SVG, і багато операцій можуть вийти з ладу.

HTML5 обіцяє в майбутньому використовувати <svg>без xmlnsпростого документа HTML ( text/html). Але це лише хакер парсеру (**), вміст SVG все ще буде SVGElements у просторі імен SVG, а не HTMLElements, тому ви не зможете використовувати, innerHTMLхоча вони виглядають як частина документа HTML.

Однак для сучасних браузерів ви повинні використовувати X HTML (правильно слугувати application/xhtml+xml; зберегти з розширенням файлу .xhtml для локального тестування), щоб SVG працював взагалі. (Це в будь-якому сенсі має сенс; SVG є належним чином на основі XML стандарту.) Це означає, що вам доведеться уникати <символів всередині блоку сценаріїв (або вкладати в розділ CDATA) і включати xmlnsдекларацію XHTML . приклад:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
    <svg id="s" xmlns="http://www.w3.org/2000/svg"/>
    <script type="text/javascript">
        function makeSVG(tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs)
                el.setAttribute(k, attrs[k]);
            return el;
        }

        var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
        document.getElementById('s').appendChild(circle);
        circle.onmousedown= function() {
            alert('hello');
        };
    </script>
</body></html>

*: ну, є DOM рівень LS parseWithContext , але підтримка браузера дуже погана. Редагувати, щоб додати: однак, хоча ви не можете ввести розмітку у SVGElement, ви можете ввести новий SVGElement в HTMLElement за допомогою innerHTML, а потім перенести його до потрібної цілі. Це, мабуть, буде трохи повільніше:

<script type="text/javascript"><![CDATA[
    function parseSVG(s) {
        var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
        div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
        var frag= document.createDocumentFragment();
        while (div.firstChild.firstChild)
            frag.appendChild(div.firstChild.firstChild);
        return frag;
    }

    document.getElementById('s').appendChild(parseSVG(
        '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/>'
    ));
]]></script>

**: Я ненавиджу те, як, здається, автори HTML5 лякаються XML і налаштовані на підключення XML-функцій, що перетворюються на суворий безлад, який є HTML. XHTML вирішив ці проблеми років тому.

У відповідь прийняті шоу занадто складним способом. Як стверджує Форресто у своїй відповіді , " це, мабуть, додає їх у провідник 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), наприклад. створений з використанням Рафаеля або подібного у вашому прикладі "жорстко закодований" без написання сценарію.
• Ви можете додати складні структури елементів у вигляді рядків, наприклад. $('svg').prepend('<defs><marker></marker><mask></mask></defs>');як ви робите в jQuery.
• після того, як елементи додаються та $("#cont").html($("#cont").html());стануть видимими на екрані за допомогою їх атрибутів, можна редагувати за допомогою jQuery.

Редагувати:

Вищеописана методика працює лише з "жорстко кодованим" або маніпульованим DOM (= document.createElementNS і т.д.) SVG. Якщо для створення елементів використовується Рафаель, (за моїми тестами) зв'язок між об'єктами Рафаеля та SVG DOM порушується, якщо $("#cont").html($("#cont").html());він використовується. Вирішення цього завдання - це взагалі не використовувати, $("#cont").html($("#cont").html());а замість нього використовувати підроблений документ SVG.

Цей манекен SVG - це спочатку текстове подання документа SVG і містить лише необхідні елементи. Якщо ми хочемо, наприклад. щоб додати елемент фільтра до документа Рафаеля, манекен може бути чимось подібним <svg id="dummy" style="display:none"><defs><filter><!-- Filter definitons --></filter></defs></svg>. Текстове подання спочатку перетворюється в DOM за допомогою методу $ ("body"). Append () jQuery. А коли елемент (фільтр) знаходиться в DOM, його можна запитувати за допомогою стандартних методів jQuery і додавати до основного документа SVG, який створює Рафаель.

Для чого потрібна ця пустушка? Чому б не додати елемент фільтра строго до створеного Рафаелем документа? Якщо ви спробуйте це, наприклад, $("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());це не працює при використанні Raphael. Це буде дуже короткий злом.)

Все більш популярна бібліотека D3 дуже добре справляється із диваками додавання / маніпулювання svg. Ви можете розглянути можливість його використання на відміну від згаданих тут хакерів jQuery.

HTML

<svg xmlns="http://www.w3.org/2000/svg"></svg>

Javascript

var circle = d3.select("svg").append("circle")
    .attr("r", "10")
    .attr("style", "fill:white;stroke:black;stroke-width:5");

JQuery не може додати елементи до <svg>(здається, додає їх у провідник DOM, але не на екрані).

Одне вирішення полягає в тому, щоб додати на сторінку <svg>всі потрібні вам елементи, а потім змінити атрибути елементів за допомогою .attr().

$('body')
  .append($('<svg><circle id="c" cx="10" cy="10" r="10" fill="green" /></svg>'))
  .mousemove( function (e) {
      $("#c").attr({
          cx: e.pageX,
          cy: e.pageY
      });
  });

http://jsfiddle.net/8FBjb/1/

Я не бачив, щоб хтось згадував цей метод, але document.createElementNS()корисний у цьому випадку.

Ви можете створити елементи, використовуючи ванільний Javascript як звичайні вузли DOM з правильним простором імен, а потім jQuery-ify їх звідти. Так:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
    circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');

var $circle = $(circle).attr({ //All your attributes });

$(svg).append($circle);

Єдиною нижньою стороною є те, що вам потрібно створити кожен елемент SVG з потрібним простором імен окремо, інакше він не працює.

Знайдено простий спосіб роботи з усіма у мене браузерами (Chrome 49, Edge 25, Firefox 44, IE11, Safari 5 [Win], Safari 8 (MacOS)):

// Clean svg content (if you want to update the svg's objects)
// Note : .html('') doesn't works for svg in some browsers
$('#svgObject').empty();
// add some objects
$('#svgObject').append('<polygon class="svgStyle" points="10,10 50,10 50,50 10,50 10,10" />');
$('#svgObject').append('<circle class="svgStyle" cx="100" cy="30" r="25"/>');

// Magic happens here: refresh DOM (you must refresh svg's parent for Edge/IE and Safari)
$('#svgContainer').html($('#svgContainer').html());

.svgStyle
{
  fill:cornflowerblue;
  fill-opacity:0.2;
  stroke-width:2;
  stroke-dasharray:5,5;
  stroke:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="svgContainer">
  <svg id="svgObject" height="100" width="200"></svg>
</div>

<span>It works if two shapes (one square and one circle) are displayed above.</span>

Я бачу коло в Firefox, виконуючи 2 речі:

1) Перейменування файлу з HTML у xhtml

2) Змініть сценарій на

<script type="text/javascript">
$(document).ready(function(){
    var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    obj.setAttributeNS(null, "cx", 100);
    obj.setAttributeNS(null, "cy", 50);
    obj.setAttributeNS(null, "r",  40);
    obj.setAttributeNS(null, "stroke", "black");
    obj.setAttributeNS(null, "stroke-width", 2);
    obj.setAttributeNS(null, "fill", "red");
    $("svg")[0].appendChild(obj);
});
</script>

На основі відповіді @ chris-дельфіна, але за допомогою функції помічника:

// Creates svg element, returned as jQuery object
function $s(elem) {
  return $(document.createElementNS('http://www.w3.org/2000/svg', elem));
}

var $svg = $s("svg");
var $circle = $s("circle").attr({...});
$svg.append($circle);

Якщо рядок, який потрібно додати, є SVG, і ви додасте належне простір імен, ви можете проаналізувати рядок як XML та додати до батьківського.

var xml = jQuery.parseXML('<circle xmlns="http://www.w3.org/2000/svg" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
$("svg").append(xml.documentElement))

Прийнята відповідь Bobince - це коротке, портативне рішення. Якщо вам потрібно не тільки додати SVG, але й маніпулювати ним, ви можете спробувати бібліотеку JavaScript "Pablo" (я написав це). Він буде відчувати знайомим користувачам jQuery.

Тоді ваш приклад коду виглядатиме так:

$(document).ready(function(){
    Pablo("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});

Ви також можете створювати елементи SVG на льоту, не вказуючи розмітку:

var circle = Pablo.circle({
    cx:100,
    cy:50,
    r:40
}).appendTo('svg');

Я б припустив, що може бути краще використовувати ajax і завантажити SVG-елемент з іншої сторінки.

$('.container').load(href + ' .svg_element');

Де href - це розташування сторінки з svg. Таким чином ви можете уникнути будь-яких ефектів хвилювання, які можуть виникнути при заміні вмісту html. Крім того, не забудьте розгорнути SVG після завантаження:

$('.svg_element').unwrap();

Це сьогодні працює для мене з FF 57:

function () {
    // JQuery, today, doesn't play well with adding SVG elements - tricks required
    $(selector_to_node_in_svg_doc).parent().prepend($(this).clone().text("Your"));
    $(selector_to_node_in_svg_doc).text("New").attr("x", "340").text("New")
        .attr('stroke', 'blue').attr("style", "text-decoration: line-through");
}

Виробляє:

 var svg; // if you have variable declared and not assigned value.
 // then you make a mistake by appending elements to that before creating element    
 svg.appendChild(document.createElement("g"));
 // at some point you assign to svg
 svg = document.createElementNS('http://www.w3.org/2000/svg', "svg")
 // then you put it in DOM
 document.getElementById("myDiv").appendChild(svg)
 // it wont render unless you manually change myDiv DOM with DevTools

// to fix assign before you append
var svg = createElement("svg", [
    ["version", "1.2"],
    ["xmlns:xlink", "http://www.w3.org/1999/xlink"],
    ["aria-labelledby", "title"],
    ["role", "img"],
    ["class", "graph"]
]);
function createElement(tag, attributeArr) {
      // .createElementNS  NS is must! Does not draw without
      let elem = document.createElementNS('http://www.w3.org/2000/svg', tag);             
      attributeArr.forEach(element => elem.setAttribute(element[0], element[1]));
      return elem;
}
// extra: <circle> for example requires attributes to render. Check if missing.

Набагато простішим способом є просто генерувати свій SVG у рядок, створити HTML-елемент для обгортки та вставити SVG-рядок у елемент HTML за допомогою $("#wrapperElement").html(svgString). Це добре працює в Chrome і Firefox.