Как динамически добавлять элементы в SVG-изображение с помощью jquery?

Если я динамически загружаю некоторые данные svg внутри изображения svg, я могу увидеть его при проверке DOM, но он фактически не отображается в браузере. Ниже приведен простой пример, когда я пытаюсь поместить маленький прямоугольник внутри большего прямоугольника. Предсборное изображение SVG с точно таким же содержимым работает, но когда я пытаюсь объединить их на лету с jquery, внутренний прямоугольник никогда не появляется. Что я недопонимаю?Как динамически добавлять элементы в SVG-изображение с помощью jquery?

test.html:

<html> 
<head> 
<title>SVG test</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#already-combined").load("test_combined.svg svg"); //works 
    $("#combine").load("test_outer.svg svg", function() { 
     $(this).find("svg").append("<g id=\"appended\"></g>"); 
     // present when inspecting DOM, but is never visible... 
     $("#appended").load("test_inner.svg svg > *"); 
    }); 
}); 
</script> 
</head> 
<body> 
<h3>Already combined...</h3> 
<div id="already-combined"></div> 
<h3>Combine in javascript...</h3> 
<div id="combine"></div> 
</body> 
</html>

test_combined.svg:

<svg width="100" height="100"> 
    <rect x="1" y="1" fill="none" stroke="#000000" width="75" height="75"/> 
    <g> 
    <rect x="25" y="25" fill="none" stroke="#000000" width="25" height="25"/> 
    </g> 
</svg>

test_outer.svg:

<svg width="100" height="100"> 
    <rect id="outer" x="1" y="1" fill="none" stroke="#000000" width="75" height="75"/> 
</svg>

test_inner.svg:

<svg width="100" height="100"> 
    <rect id="inner" x="25" y="25" fill="none" stroke="#000000" width="25" height="25"/> 
</svg>

Вот DOM, как видно, осматривая в светлячок:

<html><head> 
<title>SVG test</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#already-combined").load("test_combined.svg svg"); 
    $("#combine").load("test_outer.svg svg", function() { 
     $(this).find("svg").append("<g id=\"appended\"></g>"); 
     $("#appended").load("test_inner.svg svg > *"); 
    }); 
}); 
</script> 
</head> 
<body> 
<h3>Already combined...</h3> 
<div id="already-combined"><svg width="100" height="100"> 
    <rect x="1" y="1" fill="none" stroke="#000000" width="75" height="75"></rect> 
    <g> 
    <rect x="25" y="25" fill="none" stroke="#000000" width="25" height="25"></rect> 
    </g> 
</svg></div> 
<h3>Combine in javascript...</h3> 
<div id="combine"><svg width="100" height="100"> 
    <rect id="outer" x="1" y="1" fill="none" stroke="#000000" width="75" height="75"></rect> 
<g id="appended"><rect id="inner" x="25" y="25" fill="none" stroke="#000000" width="25" height="25"></rect></g></svg></div> 

</body></html>

источник

2016-02-12 Blake

Можете ли вы показать результат DOM (проверено)? – kevinkl3

Просто добавил его выше. – Blake

Вырежьте новый код, а затем просто повторно вставить его обратно в его

Более конкретно, измените следующую строку ....

$("#appended").load("test_inner.svg svg > *");

... до ...

$("#appended").load("test_inner.svg svg > *", function() { $("#combine").html($("#combine").html()); });

Это похоже на то, что вы вынуждаете ручной экран или обновлять div. Это кажется очень странным и довольно раздражающим.

Некоторые мысли: Это может быть ошибка в реализации браузеров SVG (но см. Мои комментарии ниже о браузерах). Это может иметь какое-то отношение к динамическому взаимодействию двух разных DOM, HTML и SVG. Это может быть связано с использованием jQuery, который, по его тишине в отношении SVG, кажется, что он никогда не гарантировал, что он должен работать с SVG (и почему некоторые другие написали плагины/библиотеки, чтобы заставить его это сделать) , Хм.

(Кстати, это решение работает в Firefox (v44.0.2) и Safari (v9.0.3), но даже ваш исходный код вообще не показывает SVG в Chrome (v48.0.2564.103) или в Opera (v35.0.2066.37). Я не проверял Internet Explorer.)

источник

2016-02-13 16:01:19

Как динамически добавлять элементы в SVG-изображение с помощью jquery?

ответ

Смежные вопросы