第一个示例代码:
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
渲染过程包括以下内容:
- SVG图像被定义在
<svg> ...... </svg>
元素。 <svg>
元素的宽度和高度属性被用来定义SVG图像的高度和宽度。- 在上面的例子中,
<circle>
元素用来画一个圆。 cx
和cy
属性被用来表示圆的中心,它的默认值是(0,0)
。r
属性用来表示圆的半径。- 其他属性
stroke
和stroke-width
用于控制圆的轮廓。 fill
属性用于定义圆的填充颜色。