書名： 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.

官术网_书友最值得收藏!

D3.js Quick Start Guide

Basic elements