在HTML5中,你可以直接嵌入SVG元素融入到你的HTML页面。
嵌入SVG直接到HTML页面
下面是一个简单的SVG图形的例子:
这里是HTML代码:
例
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"
/>
</svg>
</body>
</html>
试一试» SVG Code explanation:
- SVG图像始于一个<svg>元素
- 在宽度和高度属性<svg>元素定义了SVG图像的宽度和高度
- 在<circle>元素被用来绘制一个圆
- 在CX和cy属性定义的x和圆的中心的y坐标。 如果省略CX和CY,圆的中心被设定为(0, 0)
- 所述r属性定义了圆的半径
- 行程和卒中width属性控制如何显示形状的轮廓。 我们把圆的轮廓设置为4像素绿色的“边界”
- 该fill属性指的是圆圈内的颜色。 我们设置填充颜色为黄色
- 闭幕</svg>标记关闭SVG图像
注意:由于SVG是用XML编写的,所有的元素必须正确关闭!