This is the code for Chapter 1, Figure 21 from D3.js in Action showing how fill and path-closing work with SVG path elements.
Note that there is no D3 code or other JavaScript in this example, just vanilla SVG.
This is the code for Chapter 1, Figure 21 from D3.js in Action showing how fill and path-closing work with SVG path 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 4</title> | |
<meta charset="utf-8" /> | |
</head> | |
<style> | |
svg { | |
position: absolute; | |
width: 500px; | |
height: 500px; | |
border: 1px lightgray solid; | |
} | |
</style> | |
<body> | |
<div id="vizcontainer"> | |
<svg> | |
<path style="fill:none;stroke:gray;stroke-width:4px;" d="M 10,60 40,30 50,50 60,30 70,80" transform="translate(0,0)" /> | |
<path style="fill:black;stroke:gray;stroke-width:4px;" d="M 10,60 40,30 50,50 60,30 70,80" transform="translate(0,100)" /> | |
<path style="fill:none;stroke:gray;stroke-width:4px;" d="M 10,60 40,30 50,50 60,30 70,80Z" transform="translate(0,200)" /> | |
<path style="fill:black;stroke:gray;stroke-width:4px;" d="M 10,60 40,30 50,50 60,30 70,80Z" transform="translate(0,300)" /> | |
</svg> | |
</div> | |
</body> | |
<footer> | |
<script> | |
</script> | |
</footer> | |
</html> |