<svg xmlns="http://www.w3.org/2000/svg" height="360" width="400">
			<g id="groupParent">
				<g class="groupChild">
					<path d="M250 150 L150 350 L350 350 Z" />
				</g>
				<g class="groupChild">
					<path d="M500 100 L400 350 L300 100 Z" />
				</g>
			</g>
			<circle id="circ1" class="circ" cx="50" cy="50" r="35"></circle>
		</svg>
	

SVG consists of a group (#groupParent) with 2 group children (.child) each containing a path. Outside of #groupParent is a circle (#circ1, .circ). Exits are north and west.

Selecting class and ids

#groupParent, #circ1, and #groupParent.children() length:
.child, and .circ length:

Setting CSS properties

$("#groupParent").css("opacity", "0.4"):Opacity changed
$("#groupParent").css("fill", "red"):No fill
document.getElementById("groupParent").style.fill = "red":No fill
$( "#groupParent" )[0].setAttributeNS(null,'fill','green'):Fill changed for children

Adding class names

$("#circ1").addClass("circ2"), document.getElementById( "circ1" ).className += " circ2":Both give error: Setting a property that has only a getter