重新初始化SVGweb for ajax

前端之家收集整理的这篇文章主要介绍了重新初始化SVGweb for ajax前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当简单地加载(打开)页面时,我没有使用SVGweb的问题.

如何重新初始化SVGweb以重绘页面上的所有SVG?

另外我需要SVGweb来重新扫描和重新呈现页面上的所有内容.

来源(由此):

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

对此(就像SVGweb si那样只需打开页面):

<svg>
...
</svg>

我需要这个,因为我使用ajax更改了SVG图形,需要在页面上重新渲染它.

我需要相同的功能,并在不修改svgweb源或手动调用_onDOMContentLoaded()处理程序的情况下想出如何正确执行此操作.实际上,它本身就受到支持.

诀窍是使用window.svgweb.appendChild()将您的SVG元素(重新)附加到DOM,这导致节点由svgweb处理,如documented within the svgweb manual所示.

例如,使用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();
});

为了使其正常工作,我建议使用专用div包装所有SVG脚本标记,以便在附加SVG元素时将其附加到不包含其他节点的父元素.这消除了在该过程中无意中重新排序节点的可能性.

猜你在找的Ajax相关文章