This is the code for Chapter 1, Figure 18 from D3.js in Action showing different types of SVG elements.
Note that there is no D3 code or other JavaScript in this example, just vanilla SVG.
forked from emeeks's block: Ch. 1, Fig. 18 - D3.js in Action
xxxxxxxxxx
<html>
<head>
<title>D3 in Action Chapter 1 - Example 1</title>
<meta charset="utf-8" />
</head>
<style>
svg {
position: absolute;
width: 500px;
height: 500px;
border: 1px lightgray solid;
}
</style>
<body>
<div id="vizcontainer">
<svg>
<line x1="10" y1="10" x2="60" y2="60" style="stroke:blue;stroke-width:1px;" />
<!-- 多边形-->
<polygon style="fill:gray;" points="80,400 120,400 160,440 120,480 60,460" />
<!-- 折线-->
<polyline style="fill:white; stroke:black; stoke-width:3;" points="100,20 20,90 60,160 140,160 180,90" transform="translate(50, 150)"/>
<!-- 三次贝塞尔曲线 -->
<path d="M30,100 C100,20 190,20 270,100 S400,180 450,100" style="fill:white; stroke:black; stroke-width:3"></path>
<!-- 两次贝塞尔曲线 -->
<!--<path d="M30,100 Q190,20 270,100 T450,100" style="fill:white; stroke:black; stroke-width:3"></path>-->
<!--g标签作用?-->
<g>
<circle cy="100" cx="200" r="30"/>
<ellipse cx="300" cy="200" rx="50" ry="20" style="fill:#33FF33; stoke:blue; stroke-width:4"/>
<rect x="410" y="200" width="100" height="50" style="fill:pink; stroke:black; stroke-width:1px;" />
</g>
</svg>
</div>
</body>
<footer>
<script>
</script>
</footer>
</html>