使用jQuery动态插入SVG的每个元素都不会显示，并且在Firebug中显示为灰色

Question

当使用jQuery动态地将元素插入到SVG（或任何嵌套的G元素）中时，从不显示插入的元素（g，circle，rect等）。在Firebug进行检查时，他们在那里，但是变灰了。查看Firebug中的Layout-tab时，它表示宽度和高度为0.

<svg>
    <circle fill="gray" r=80 /> <!-- this one IS displayed -->
</svg>
<script>
    $('svg').append('<circle fill="red" r=40 />');
</script>

上面的代码在调整svg外部的元素时工作正常，fx将HR元素插入BODY。

来自Firebug，DOM-inspector的屏幕截图：

来自Firebug，Layout-inspector的屏幕截图：