Question

我的HTML看起来像这样：

<div class="map-container">
    <svg id="mapa" width="600" height="400"></svg>
</div>

然后，在Backbone中，在渲染函数中，我用一些矩形填充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文件，它工作正常，所以我不认为这是任何一种错字。

知道如何解决这个问题吗？

Answer 1

除了createElementNS之外，还有一个替代方法是将.html()用于整个<svg>元素：

$(".map-container").html('<svg>' + /* svg content */  + '</svg>')

请参阅this fiddle。

Firefox和IE - 动态加载时矩形不会显示在svg中

1 个答案: