SVG系列一
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>
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>