HTML5 内联 SVG - 程序员自由职业

在 HTML5 中，你可以使用内联 SVG（可缩放矢量图形）来在 HTML 文档中嵌入矢量图形。SVG 是一种基于 XML 的图形标记语言，允许你创建矢量图形，包括图表、图标和其他图形元素。以下是一个简单的内联 SVG 的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline SVG Example</title>
</head>
<body>
  <h1>Inline SVG Example</h1>

  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</body>
</html>

在这个例子中：

<svg> 元素定义了一个 SVG 图形容器，指定了宽度和高度。

<circle> 元素表示一个圆，通过 cx 和 cy 属性定义圆心的坐标，r 属性定义半径，stroke 和 stroke-width 属性定义边框样式，fill 属性定义填充颜色。

通过内联 SVG，你可以直接在 HTML 中创建图形，而不必依赖外部图像文件。SVG 允许你使用矢量图形，可以无损缩放而不失真，适用于各种屏幕和分辨率。你还可以使用 JavaScript 来操作和修改内联 SVG 元素，实现更丰富的交互效果。

转载请注明出处：http://www.zyzy.cn/article/detail/3669/HTML5