1

When using jQuery to dynamically insert elements into an SVG (or any nested G-element), the inserted elements (g, circle, rect, etc) are never shown. When inspecting in Firebug they are there, but grayed out. When looking in the Layout-tab in Firebug it says that the width and height are 0. 

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

The code above works fine when adjusting elements outside svg, fx inserting an HR-element into BODY.

Screenshot from Firebug, DOM-inspector:

enter image description here

Screenshot from Firebug, Layout-inspector:

enter image description here

Mads Skjern
  • 5,648
  • 6
  • 36
  • 40
  • Not sure about your problem, but your html isn't standard. You should use double quotes (") to set attribute values, not single quotes (') and not "no quotes" – Amit Jul 19 '15 at 18:59
  • @Amit: Fixed that :) But it did nothing to my problem. – Mads Skjern Jul 19 '15 at 19:02

0 Answers0