改變SVG元素，

我有這樣的HTML：改變SVG元素，

<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和使用jQuery的replaceWith()我代替原來的SVG另一個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);

我已經通過有關這個問題的論壇了，但沒有找到一個解決方案。

來源

2013-10-22 Sankalp Mishra

'style =「display：none」'？ – DrColossos

這是刪除，因爲我用jQuery替換內容。 –

你可以顯示你的JS代碼嗎？ –

試試這個替換後：

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

來源

2013-10-22 07:38:43

Nopes..NOt working..It取代html但瀏覽器dosen't渲染它 –

@SankalpMishra：和刷新身體？（$（ '身體'）HTML（））'$（ '主體'）HTML;'。另外，你可以添加Jquery代碼到你的問題？ –

實際上這個代碼是用來準備在鼠標上彈出的。刷新後的一切都很好..但如果我改變HTML和鼠標在它顯示相同的流行 –

我敢肯定你的問題是要創建的SVG片段的方式。你不能像使用jQuery那樣使用jQuery創建SVG，就像創建HTML片段一樣。 jQuery不會在正確的命名空間中創建SVG。

您將需要手動創建SVG DOM element-by-DOM元素。或者使用諸如jQuery SVG或d3.js之類的插件。

來源

2013-10-22 17:01:23

改變SVG元素，

回答

相關問題