[英]Firefox and IE - rectangles don't display in svg when dynamically loaded
我的HTML看起来像这样:
<div class="map-container">
<svg id="mapa" width="600" height="400"></svg>
</div>
然后,在Backbone中,在render函数中,我用一些矩形填充svg:
var mapa = $(this.el).find('#mapa');
$.post("./getElements", function(data) {
$(mapa).html('<rect id="sector1" x="0px" y="0px" width="300px" height="200px" fill="gray" fill-opacity="0.1"/><rect id="sector1" x="301px" y="0px" width="300px" height="200px" fill="gray" fill-opacity="0.1"/><rect id="sector1" x="0px" y="201px" width="300px" height="200px" fill="gray" fill-opacity="0.1"/><rect id="sector1" x="301px" y="201px" width="300px" height="200px" fill="gray" fill-opacity="0.1"/>');
});
稍后,我想从数据库中获取元素。 目前,它在Chrome中可以正常工作,但是Firefox和IE不会显示任何内容-但是,如果我直接将代码复制粘贴到html文件中,它就可以正常工作,因此我认为这不是任何错字。
任何想法如何解决这个问题?
除了createElementNS之外,另一种方法是对整个<svg>
元素使用.html()
:
$(".map-container").html('<svg>' + /* svg content */ + '</svg>')
看到这个小提琴 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.