- D3.js Quick Start Guide
- Matthew Huntington
- 205字
- 2021-07-16 17:36:41
Basic elements
We can draw elements in our <svg> element by adding a variety of predefined tags as child elements of the <svg>. This is just as we did in HTML, where we add <div>, <a>, and <img> tags inside the <body> tag. There are many tags, such as <circle>, <rect>, and <line>, that we'll explore in a bit. Here's just one example:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
</head>
<body>
<svg>
<circle></circle>
</svg>
</body>
</html>
Note that we can't see the circle because it doesn't have a radius, as shown in this screenshot:
We'll talk more about this later, but, for now, if we want to see the circle, we can add a special attribute that all <circle> elements take:
<circle r=50></circle>
This tells the browser to give the circle a radius of 50 px, which is shown in the following screenshot:
At the moment, though, we only see the lower–right quarter of the circle. This is because the center of the circle is being drawn at the very upper–left corner of the <svg>, and the rest of it is being clipped outside the <svg>. We can change this by changing the position of the circle, which we'll do next.