Question

我试图清空一个svg并附加一些它的内部div，它不起作用但可以看到html部分以褪色的颜色加载到浏览器中。当我在浏览器中对其进行编辑并将其添加回来时，它可以正常工作。

div部分，

<li class="chart">
    <svg id="lineChartSVG" class="lineChart--svg">
       <defs>
           <linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">
                            <stop class="lineChart--gradientBackgroundArea--top" offset="0%" />
                            <stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />
            </linearGradient>
         </defs>
     </svg>               
 </li>

这就是我的方式，

$('#lineChartSVG').empty();
 var html = ' <defs> <linearGradient id=\"lineChart--gradientBackgroundArea\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"> <stop class=\"lineChart--gradientBackgroundArea--top\" offset=\"0%\" /> <stop class=\"lineChart--gradientBackgroundArea--bottom\" offset=\"100%\" /> </linearGradient> </defs>';
 $('#lineChartSVG').append(html);
 inFlightRequestCountChart();

任何帮助都将非常感激。

谢谢！

Answer 1

这是因为SVG元素没有动态更新。刷新容器元素后，它应该更新。在这种情况下<li>即给它id='chart1'，但我建议使用指定的（由你）容器。

$("#chart1").html($("#chart1").html());

说明：jquery's append not working with svg element?

示例：http://jsbin.com/ejifab/1/edit

Answer 2

请尝试，清空标签的内容。

b.up('viewport').down('#e')

Answer 3

尝试使用此类html()。

$('#lineChartSVG').empty();
var html = ' <defs> <linearGradient id=\"lineChart--gradientBackgroundArea\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"> <stop class=\"lineChart--gradientBackgroundArea--top\" offset=\"0%\" /> <stop class=\"lineChart--gradientBackgroundArea--bottom\" offset=\"100%\" /> </linearGradient> </defs>';
$('#lineChartSVG').html(html);
inFlightRequestCountChart();

jquery附加的html无效

3 个答案: