最新的Web开发教程
 

SVG在HTML


在HTML5中,你可以直接嵌入SVG元素融入到你的HTML页面。


嵌入SVG直接到HTML页面

下面是一个简单的SVG图形的例子:

对不起,您的浏览器不支持嵌入式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编写的,所有的元素必须正确关闭!