block by emeeks 72154b33488e427b0898

Ch. 1, Fig. 22 - D3.js in Action

Full Screen

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.

index.html

<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>