Note: Since SVG is written in XML, all elements must be properly closed!
<!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="#000" stroke-width="4" fill="#ccc" /> </svg> </body> </html>
- The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0)
- The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border"
但如果是画一个椭圆呢？其实如果用CSS设置它的水平半径和垂直半径就行了border-radius: 50px / 100px;
但有了SVG就可以很简单的画出椭圆以及更复杂的矢量图形了。
<svg width="400" height="200">
<ellipse cx="200" cy="100" rx="180" ry="80" style="fill: #ccc; stroke: #000; stroke-width: 4" />
</svg>
叠层的椭圆
<svg width="400" height="200">
<ellipse cx="190" cy="100" rx="180" ry="30" style="fill: red" />
<ellipse cx="180" cy="70" rx="160" ry="20" style="fill: green" />
<ellipse cx="170" cy="45" rx="140" ry="15" style="fill: blue" />
</svg>