1

我有这个 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>

然后我从 js 准备另一个 SVG 内容并使用 jqueryreplaceWith()替换原始 SVG。它被替换为在 Firebug 中看到的，但它不显示在浏览器中。

我的 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>';

我这样绑定：

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

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

4

2 回答 2

0

替换后试试这个：

$('.pop').html($('pop').html());
于 2013-10-22T07:38:43.253 回答
0

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

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

于 2013-10-22T17:01:23.550 回答