Повторная инициализация SVGweb для ajax

Question

Повторная инициализация SVGweb для ajax

У меня нет проблем с использованием SVGweb, когда страница просто загружается (открывается).

Как можно повторно инициализировать SVGweb, чтобы перерисовать все SVG на странице?

Anotherwords мне нужен SVGweb для повторного сканирования и перезаписи всего на странице.

Источник (из этого):

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

  <svg>

    ...

  </svg>

</script>

К этому (как SVGweb si делает это, когда просто открывает страницу):

<svg>

...

</svg>

Мне это нужно, потому что я изменяю графику SVG с помощью ajax и должен повторно запустить ее на странице.

690 2

svg svgweb

2 ответов:

Comments

Ничего не найдено.

Adrian Günter · Accepted Answer · 2013-12-04 05:09:13

Мне нужна была такая же возможность, и я понял, как сделать это правильно, не изменяя источник svgweb и не вызывая обработчик _onDOMContentLoaded() вручную. На самом деле, он поддерживается изначально.

Фишка в том, чтобы (пере)прикрепите СВГ элементов в DOM с помощью window.svgweb.appendChild(), который вызывает узел, чтобы быть обработаны svgweb, как документированы в svgweb инструкцию.

Пример использования jQuery:
// Iterate over all script elements whose type attribute has a value of "image/svg+xml".
jQuery('body').find('script[type="image/svg+xml"]').each(function () {
    // Wrap "this" (script DOM node) in a jQuery object.
    var $this = jQuery(this);
    // Now we use svgweb's appendChild method. The first argument is our new SVG element
    //  we create with jQuery from the inner text of the script element. The second
    //  argument is the parent node we are attaching to -- in this case we want to attach
    //  to the script element's parent, making it a sibling.
    window.svgweb.appendChild(jQuery($this.text())[0], $this.parent()[0]);
    // Now we can remove the script element from the DOM and destroy it.
    $this.remove();
});
Чтобы это работало должным образом, я предлагаю обернуть все теги скрипта SVG с выделенным div, так что при присоединении элемента SVG он присоединяется к родительскому элементу, не содержащему других узлов. Это устраняет возможность непреднамеренного изменения порядка узлов во время процесса.

ihtus · Accepted Answer · 2018-07-16 09:55:02

После изменения DOM с помощью нового кода SVGweb (через Ajax)
<script type="image/svg+xml">
  <svg>
    ...
  </svg>
</script>
Нужно выполнить это: svgweb._onDOMContentLoaded ();

Но перед этим нужно прокомментировать строку в основном источнике SVGweb svg-uncompressed.js или svg.js

Svg-несжатый.JS из
    if (arguments.callee.done) {
      return;
    }
К
    if (arguments.callee.done) {
      //return;
    }
Svg.js: найдите и удалите это:
arguments.callee.done=true;
Или заменить на
arguments.callee.done=false;
EDIT:

Еще одно исправление для IE9:

Для формат SVG.js

Из
var a=document.getElementById("__ie__svg__onload");if(a){a.parentNode.removeChild(a);a.onreadystatechange=null}
К
var IEv=parseFloat(navigator.appVersion.split("MSIE")[1]);if(IEv<9){var a=document.getElementById("__ie__svg__onload");if(a){a.parentNode.removeChild(a);a.onreadystatechange=null;a=null;}}
Для svg-несжатый.js

Из
    // cleanup onDOMContentLoaded handler to prevent memory leaks on IE
    var listener = document.getElementById('__ie__svg__onload');
    if (listener) {
      listener.parentNode.removeChild(listener);
      listener.onreadystatechange = null;
      listener = null;
    }
К
    // cleanup onDOMContentLoaded handler to prevent memory leaks on IE
    var IEv=parseFloat(navigator.appVersion.split("MSIE")[1]);
    if (IEv<9) {
        var listener = document.getElementById('__ie__svg__onload');
        if (listener) {
          listener.parentNode.removeChild(listener);
          listener.onreadystatechange = null;
          listener = null;
        }
    }