Javascript 动态更改SVG元素，

我有这个HTML：

<span class="pop">
    <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="180px" viewBox="-18.25 -18.75 200 180" enable-background="new -18.25 -18.75 200 180" xml:space="preserve">
        <text class="triangle-text" transform="matrix(1 0 0 1 63 -5.25)"  font-family="'HelveticaNeue'" font-size="11">text</text>
        <text class="triangle-text" transform="matrix(1 0 0 1 51 156.75)"  font-family="'HelveticaNeue'" font-size="11">text1</text>
        <text class="triangle-text" transform="matrix(1 0 0 1 -13.4998 77)"  font-family="'HelveticaNeue'" font-size="11">text2</text>
        <text class="triangle-text" transform="matrix(1 0 0 1 126 77)" font-family="'HelveticaNeue'" font-size="11">text3</text>
        <g>
            <polygon class="sl" fill="#F4f2f3" points="" />
        </g>
    </svg>
</span>

我这样装订：

$('.pop').children('svg').replaceWith(pop);

---

我在论坛上讨论了与此相关的问题，但没有找到解决方案

更换后尝试以下操作：

$('.pop').html($('pop').html());

---

我很确定您的问题在于创建SVG片段的方式。不能像创建HTML片段那样使用jQuery来创建SVG。jQuery不会在正确的名称空间中创建SVG

---

您需要逐个DOM元素手动创建SVG DOM元素。或者使用jQuery SVG或d3.js之类的插件。

style=display:none？当我用jQuery替换内容时，它会被删除。你能显示你的js代码吗？对我来说很好。看到这个提琴了吗：不，不工作，它取代了html，但浏览器没有呈现it@SankalpMishra：和刷新身体？$'body'.html$'body'.html；。另外，您可以将Jquery代码添加到您的问题中吗？实际上，此代码用于准备鼠标悬停时的弹出窗口。刷新后一切正常。但是如果我更改html并将鼠标移到上面，它会显示相同的POP，这与事件有关吗？您是将旧的SVG内容绑定到事件还是在事件发生时获取新内容？@SankalpMishra：绑定事件似乎有问题，您需要解除绑定并使用新的SVG内容再次绑定，如果您添加一些相关的Jquery代码可能会这样做？

$('.pop').html($('pop').html());