W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

SVG 在 HTML 页面



在HTML5中,您可以将SVG元素直接嵌入到HTML页面中。


将SVG直接嵌入HTML页面

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

对不起,您的浏览器不支持内联SVG。

这里是HTML代码:

Example

<!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代码解析:

  • SVG 图像以 <svg> 元素开始
  • <svg> 元素的 width 和 height 属性定义了 SVG 图像的宽度和高度
  • <circle> 元素用于绘制一个圆
  • cx 和 cy 属性定义了圆心的 x 和 y 坐标。如果省略 cx 和 cy,则圆的中心设置为 (0,0)
  • r 属性定义圆的半径
  • stroke 和 stroke-width 属性控制形状轮廓的显示方式。我们将圆形轮廓设置为 4px 绿色 "border"
  • fill 属性指的是圆内的颜色。我们将填充颜色设置为 黄色
  • 关闭 </svg> 标签关闭 SVG 图像

注意: 由于 SVG 是用 XML 编写的,所有元素都必须正确关闭!