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

Question

My HTML looks like this:

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

Then, in Backbone, in the render function I populate the svg with some rectangles:

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"/>');
 });

Later on I would like to take the elements from database. For now it works fine in Chrome, but Firefox and IE don't display a single thing - but if I copy-paste the code directly to the html file, it works fine, so I don't think it's any kind of a typo.

Any idea how to fix this?

Answer 1

One alternative besides createElementNS would be to use .html() for the whole <svg> element:

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

See this fiddle .