jQuery SVG nested groups

Question

I need to generate an SVG nested group with jQuerySVG or RaphaëlJS. The latter doesn't support groups, so I chose the former.

What I need:

<g transform="translate(300, 300)">
    <line x1="0" y1="0" x2="0" y2="-100" />
    <g transform="translate(0, -100) rotate(20)">
        <line x1="0" y1="0" x2="0" y2="-100" />
    </g>
</g>

The website is down at the moment, but checking the web archive for documentation I can't find a way to give an element two different groups:

svg.line(g, 10, 80, 140, 70);

I'm looking for something like:

svg.line(g, g2, 10, 80, 140, 70);

Any different approach?

Thanks

Answer 1

According to doc you can do this:

g = svg.group();
g2 = svg.group(g);
svg.line(g, 10, 80, 140, 70);
svg.line(g2, 10, 80, 140, 70);