Динамическая загрузка SVG в SVGWeb с помощью JQuery

Я пытаюсь динамически отображать некоторый контент SVG. Это содержимое хранится в виде строки в моем источнике данных. Пример строки будет выглядеть следующим образом:

<svg width="200" height="200" style="background-color:#D2B48C; margin-bottom:5px;" id="embeddedSVG">
<g id="myGroup" fill="blue" style="font-size:18px; text-anchor:middle; font-family: serif;">
<circle id="myCircle" cx="100" cy="75" r="50" stroke="firebrick" stroke-width="3" />
<text x="100" y="155">Hello World</text><text x="100" y="175">From Embedded SVG!</text>
</g></svg>

Для размещения в IE я используюSvgWeb, Моя проблема заключается в том, чтобы отобразить содержимое SVG, мне нужно обернуть его в<script type="image/svg+xml"></script> тег combo. Моя проблема заключается в том, что svg асинхронно возвращается через JQuery. И, насколько мне известно, я не могу динамически написать тег «script» из JavaScript.

Как взять содержимое SVG, полученное с помощью JQuery, и отобразить его динамически?

 awesomo11 окт. 2010 г., 23:10
Мне было интересно то же самое ... надеюсь, кто-то понял это.
 ihtus19 мар. 2013 г., 15:35
Вы можете найти решение [здесь] [1] [1]:stackoverflow.com/questions/15486422/...
 awesomo11 окт. 2010 г., 23:20
Кстати, проблема не в том, чтобы динамически генерировать<script> тегом, но заставляя SvgWeb оценивать и отображать svg внутри него после его динамического внедрения на страницу.

Ответы на вопрос(2)

Вот и воспроизведено ниже. Обратите внимание, что этот подход заставляет вас строить рут<svg> теги и атрибуты самостоятельно в javascript вместо простой загрузки всего документа svg, который у вас есть в примере вашего вопроса.

Динамическое создание корневого элемента SVG аналогично прямому внедрению в веб-страницу. Вам не нужно создавать тег SCRIPT, как если бы вы непосредственно встраивали SVG при загрузке страницы:

<script type="image/svg+xml">
  <svg>
    ...
  </svg>
</script>

Вместо этого вы следуете процессу, аналогичному описанному выше:

// create SVG root element
var svg = document.createElementNS(svgns, 'svg'); // don't need to pass in 'true'
svg.setAttribute('width', '300');
svg.setAttribute('height', '300');

// create an example circle and append it to SVG root element
var circle = document.createElementNS(svgns, 'circle');
svg.appendChild(circle);

Необходимо использовать обратный вызов, чтобы узнать, когда SVG добавляется на страницу (это небольшое отклонение от стандартного). Ниже приведены поддерживаемые способы сделать это:

svg.addEventListener('SVGLoad', function() {
  svg = this; // this will correctly refer to your SVG root
  alert('loaded!');
}, false);
// also supported:
svg.onsvgload = function() {
  alert('loaded!');
}

Теперь добавьте корень SVG в наш документ

svgweb.appendChild(svg, document.body); // note that we call svgweb.appendChild

Обратите внимание, что в приведенном выше коде мы должны использовать прослушиватель событий, чтобы знать, когда корень SVG завершает загрузку на страницу; это небольшое отклонение от стандарта, необходимого для магии SVG Web.

Родитель, которого вы присоединяете либо к своему корню SVG, уже должен быть присоединен к реальному DOM на вашей странице (то есть он не может быть отключен от страницы).

Плагин jQuery SVG Официальный сайт не работает, но выискиватьинструкции.

Соответствующая часть, которую вы спрашиваете, является ответом в этом разделе, я полагаю ..

загрузить (URL, настройки) эту оболочку Загрузить внешний документ SVG. Обратите внимание, что браузер может не разрешать вам загружать документы с сайтов, отличных от оригинальной страницы. Если обратный вызов не предоставляется и возникает ошибка, сообщение об ошибке отображается в контейнере SVG.

url (строка) - это местоположение документа SVG или фактического встроенного документа SVG.

настройки (логические), см. addTo ниже или (функция), см. onLoad ниже, или (объект) дополнительные настройки для загрузки с атрибутами ниже:

addTo (логический, необязательный) true, чтобы добавить к тому, что уже есть, или false (по умолчанию), чтобы очистить холст. Сначала changeSize (логический, необязательный) true, чтобы разрешить изменение размера холста, или false (по умолчанию), чтобы сохранить оригинал. Функция обратного вызова size onLoad (функция, необязательно) после загрузки документа, эта функция получает объект-оболочку SVG и необязательное сообщение об ошибке в качестве параметров, и внутри него находится разделение контейнера SVG.

svg.load('images/rect01.svg',
    {addTo: true, onLoad: loadDone});
svg.load('<svg ...>...</svg>', loadDone);

Кроме того, для удобства, вот некоторый PHP-код, который я использовал для вставки такого SVG в оператор цикла, чтоработал хорошо..

if (ICON_FILE_EXT == "svg") {
        print   "\<script\>svg.load(\'".ICON_PATH."/directory.svg\', \{addTo\: true, onLoad\: loadDone\}\)\;\<\/script\>";
 commonpike05 февр. 2013 г., 18:00
Этот плагин SVG кажется несовместимым с SVGWeb, или, по крайней мере, когда он рендерится во флэш-памяти (что является целью svgweb)

Ваш ответ на вопрос