HTML 在 HTML 中嵌入 SVG

在本文中，我们将介绍如何在 HTML 中嵌入 SVG。

阅读更多：HTML 教程

什么是 SVG

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用于描述二维矢量图形的标记语言，它基于 XML 格式，可被浏览器读取和解析。与基于像素的图像不同，SVG 图像可以无损放大和缩小，并且保持图像的质量和清晰度。SVG 可以用于绘制图形、制作动画、创建交互式图像等。

在 HTML 中嵌入 SVG

在 HTML 中嵌入 SVG 可以通过使用 <svg> 元素来实现。以下是一个简单的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>SVG 示例</title>
  </head>
  <body>
    <h1>SVG 示例</h1>
    <svg width="200" height="200">
      <circle cx="100" cy="100" r="50" fill="red" />
    </svg>
  </body>
</html>

在上面的示例中，我们使用 <svg> 元素创建了一个宽度和高度都为 200 像素的 SVG 画布。然后，我们使用 <circle> 元素在画布上绘制了一个半径为 50 像素，填充色为红色的圆形。

SVG 元素和属性

SVG 中有许多元素和属性可用于绘制图形和控制元素的外观。下面是一些常用的 SVG 元素和属性：

<rect>：绘制矩形
<circle>：绘制圆形
<ellipse>：绘制椭圆
<line>：绘制直线
<path>：绘制路径
<text>：绘制文本

这些元素可以通过设置各种属性来调整它们的形状、大小、位置和颜色。例如，cx 和 cy 属性可用于指定圆形的中心坐标，r 属性可用于指定圆形的半径，fill 属性可用于指定元素的填充色。

在 SVG 中嵌入 HTML

与在 HTML 中嵌入 SVG 不同，SVG 也可以嵌入到 HTML 中。这允许我们在 SVG 图像中包含 HTML 元素，从而实现更多的交互和动态效果。

以下是一个示例，演示了如何在 SVG 中嵌入 HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 在 SVG 中嵌入</title>
    <style>
      .tooltip {
        position: absolute;
        background-color: black;
        color: white;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h1>HTML 在 SVG 中嵌入</h1>
    <svg width="400" height="400">
      <rect x="50" y="50" width="300" height="300" fill="blue" />
      <foreignObject x="100" y="100" width="200" height="200">
        <div xmlns="http://www.w3.org/1999/xhtml" class="tooltip">
          <p>这是一个嵌入的 HTML 元素</p>
        </div>
      </foreignObject>
    </svg>
  </body>
</html>

在上面的示例中，我们使用 <foreignObject> 元素将一个包含文本的 <div> 元素嵌入到 SVG 图像中。这个嵌入的 HTML 元素被放置在坐标 (100, 100) 的位置，并且有一个层叠样式类名为 “tooltip”。在 CSS 样式表中，我们定义了 “tooltip” 类的样式，以便在鼠标悬停在嵌入的元素上时显示一个黑色背景的提示框。