Border for svg elements

Question

I am working with svg and its dom manipulation. I want to create a border for a group of svg elements positioned inside the <g> tag. How do I do this? Is it possible to create circular / elliptical boundaries also? I am using the jQuery SVG library. Thanks in advance

<g>
<rect x="20" y="30" width="200" height="300" fill = "red"/>
<circle cx="40" cy="50" r="25" fill="blue"/>
</g>

Answer 1

You cannot add a border to containers like <g> or <svg>, since they are not supposed to render anything directly by themselves. You may want to look how this demo is implemented using the cross browser implementation of getScreenBBox();

Answer 2

In your CSS you could add:

rect {border: 1px solid #00f;}