This is the code for Chapter 1, Figure 22 from D3.js in Action showing how CSS rules can be applied to SVG elements.
Note that there is no D3 code or other JavaScript in this example, just vanilla SVG.
<html>
<head>
<title>D3 in Action Chapter 1 - Example 2</title>
<meta charset="utf-8" />
</head>
<style>
svg {
position: absolute;
width: 500px;
height: 500px;
border: 1px lightgray solid;
}
.inactive, .tentative {
stroke: darkgray;
stroke-width: 2px;
stroke-dasharray: 5 5;
}
.tentative {
opacity: .5;
}
.active {
stroke: black;
stroke-width: 4px;
stroke-dasharray: 1;
}
circle {
fill: red;
}
rect {
fill: darkgray;
}
</style>
<body>
<div id="vizcontainer">
<svg>
<path d="M 10,60 40,30 50,50 60,30 70,80" />
<polygon class="inactive" points="80,400 120,400 160,440 120,480 60,460"/>
<g>
<circle cy="100" cx="200" r="30"/>
<rect class="active" x="410" y="200" width="100" height="50" />
</g>
</svg>
</div>
</body>
<footer>
<script>
</script>
</footer>
</html>