上QQ阅读APP看书，第一时间看更新

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.

本周热推：

AI 3.0 Linux常用命令简明手册 AI的25种可能西门子S7-1200 PLC编程从入门到实战计算机原理