CODEWITHSUNDEEP
javascripthtmlcanvassvgraphael
Shiv Kumar Ganesh
Shiv Kumar Ganesh

Reputation: 3825

SVG element as a Container?

I have a rectangle made from svg rect tag and now want to embed a circle into it. I found that svg elements cannot contain child elements or I guess I din get appropriate example. Please let me know is it possible to have one element into another as a child and then too visible. May be with a higher z-index? How is it possible using Raphael?

Upvotes: 1

Views: 5194

Answers (3)

Luke
Luke

Reputation: 20041

The SVG group tag <g> seems like the most equivalent to HTML's <div> container tag.

From https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g :

The g element is a container used to group objects. Transformations applied to the g element are performed on all of its child elements.

Permitted content: Any number of the following elements, in any order

Upvotes: 2

Kevin Nielsen
Kevin Nielsen

Reputation: 4433

If you're interested in creating complex shapes, paths offer a lot of possibility. You get the same persistent state, attribute malleability, and interactivity (click, hover, drag) that the rect and circle primitives have, but with no limitations on region complexity.

As an added bonus, with cleverly selected paths you can morph cleanly from one shape to another. For instance, check this fiddle out.

There are many aids for building complex paths... for most projects, Google's SVG-edit is perfectly sufficient.

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124169

Just add the circle as a later sibling of the rectange and it will draw over the top. If you want the rectangle to draw over the circle you'd put it after the circle. It's called painters model as whatever you paint last is on top of everything else.

SVG doesn't have a z-index property at the moment although there is a proposal to add it to the upcoming SVG 2.0 specification.

If you want to learn SVG there's an online primer

Upvotes: 2

Related Questions