SVG系列一

来源：互联网发布：数据流图数据字典实例编辑：程序博客网时间：2024/06/08 17:44

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"

当然画圆、矩形以及带圆角的矩形大可不必用SVG，普通的CSS就可以搞定。

但如果是画一个椭圆呢？其实如果用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>

0 0