Border for svg elements

javascript svg jquery-svg
Srikrishnan Suresh picture Srikrishnan Suresh · Mar 24, 2012 · Viewed 8k times · Source

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

Emil picture Emil · Mar 24, 2012

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();

Related questions

jQuery SVG, why can't I addClass?

I am using jQuery SVG. I can't add or remove a class to an object. Anyone know my mistake? The SVG: <rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" /> The jQuery that won't add the class: $(".jimmy").…

Read More
Convert SVG to image (JPEG, PNG, etc.) in the browser

I want to convert SVG into bitmap images (like JPEG, PNG, etc.) through JavaScript.

Read More
How to use z-index in svg elements?

I'm using the svg circles in my project like this, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"> <g> <g id="one"> <circle fill="green" cx="100" cy="105" r="20" /> </g> <…

Read More