在 HTML 中使用 SVG

SVG（Scalable Vector Graphics）是一种使用 XML 格式定义图形的格式。和其他图像格式（如 JPEG 或 PNG）相比，SVG 具有优势：它定义的是矢量图形，能够随着放大或缩小而保持清晰度。而且，SVG 图形是可编辑的，因为它的元素和属性是可以通过代码编辑的。

在 HTML 中使用 SVG 可以带来以下好处：

• 在不损失精度的情况下缩放图形
• 更准确的显示复杂的矢量图形
• 可以在 SVG 元素上应用 CSS 样式
• 可以通过 JavaScript 动态修改 SVG 图形

如何在 HTML 中插入 SVG

要将 SVG 图形插入到 HTML 页面中，需要使用 <svg> 元素。<svg> 元素可以包含多个图形（例如，一个文本框和一个矩形）。

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50" fill="#003366" />
  <text x="75" y="50" font-size="24" fill="#FFFFFF">SVG Text</text>
</svg>

上面的代码将创建一个 200x200 像素的画布，其中包含一个蓝色的矩形和一个白色的文本框。使用 width 和 height 属性指定画布的大小，然后使用其他 SVG 元素创建图形。在这种情况下，<rect> 元素被用来创建一个矩形，<text> 元素被用来添加文本。

SVG 元素的常见属性

可以使用各种属性来控制 SVG 元素的外观和行为。下面是一些常见的 SVG 元素属性：

• width 和 height：设置元素的宽度和高度。
• fill：设置元素的颜色填充。
• stroke 和 stroke-width：设置元素的轮廓的颜色和宽度。
• transform：对元素应用变换（如旋转或缩放）。
• viewBox：指定画布上显示的内容的范围和位置。

使用 CSS 样式化 SVG 元素

SVG 元素可以使用 CSS 样式来控制其外观，例如，使用 fill 属性设置元素的颜色。

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50" class="rect" />
</svg>

<style>
  .rect {
    fill: #003366;
  }
</style>

在这个例子中，使用 .rect 类选择器来设置蓝色填充颜色。注意，CSS 样式必须放在 <style> 标签中，以便与 SVG 元素一起呈现。

动态修改 SVG 元素

使用 JavaScript，可以动态修改 SVG 元素和属性。例如，可以使用 addEventListener() 方法在单击 <rect> 元素时将其颜色更改为红色。

<svg width="200" height="200" id="my-svg">
  <rect x="10" y="10" width="50" height="50" fill="#003366" />
</svg>

<script>
  var rectEl = document.querySelector('#my-svg rect');
  rectEl.addEventListener('click', function() {
    rectEl.setAttribute('fill', '#FF0000');
  });
</script>

使用 querySelector() 方法选择 <rect> 元素，然后使用 addEventListener() 方法监听 click 事件。当单击矩形时，setAttribute() 方法将其填色更改为红色。

在 HTML 中使用 SVG 可以为我们的网站带来更多的灵活性和复杂性。使用 SVG，我们可以创建可缩放、可编辑和可定制的图像，同时可以使用 CSS 和 JavaScript 对其进行样式和行为的控制。