Changing SVG elements on the fly,

Question

I have this 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>

Then I prepare another SVG content from js and using jquery's replaceWith() I replace the original SVG. It is replaced as seen in Firebug but it is not displayed in the browser.

My JS:

   pop = '<svg xml:space="preserve" enable-background="new -18.25 -18.75 200 180" viewBox="-18.25 -18.75 200 180" height="180px" width="200px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"><text haschanged="true" class="triangle-text" transform="matrix(1 0 0 1 63 -5.25)"  font-family="HelveticaNeue" font-size="11">Chiara</text>\n\
          <text class="triangle-text" transform="matrix(1 0 0 1 51 156.75)"  font-family="HelveticaNeue" font-size="11">Non chiara</text>\n\
          <text class="triangle-text" transform="matrix(1 0 0 1 -13.4998 77)"  font-family="HelveticaNeue" font-size="11"><tspan x="10" y="10">Non</tspan><tspan x="10" y="20">concordo</tspan></text>\n\
          <text class = "triangle-text" transform = "matrix(1 0 0 1 -13.4998 77)"  font - family = "HelveticaNeue" font - size = "11" >Concordo</text>\n\
          <g>';
      for (key in triangles) {
        pop += '<polygon class = "sl" index = "' + key + '" understanding = "' + triangles[key].a + '" comprehension = "' + triangles[key].c + '" fill = "' + colors[resp.msg[key]] + '" points = "' + triangles[key].points + '" msg = "' + triangles[key].msg + '" />';
      }
      pop += '</g></svg>';

I do my binding like this:

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

I have gone through questions on the forum related to this but did not find a solution.

Answer 1

替换后尝试以下操作：

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

Answer 2

I am pretty sure your problem is the way you are creating the SVG fragment. You can't use jQuery like that to create SVGs the same way you create HTML fragments. jQuery won't create the SVG in the right namespace.

You will need to either create the SVG manually DOM element-by-DOM element. Or use a plugin such as jQuery SVG or d3.js.