Svg 通过 xlinkHref 动态改变显示图片：实现代码修改，图片自动适配

2023-12-15 21:01:12

前言

在前端开发中，我们经常需要根据不同的条件来显示不同的图片。例如，当用户将鼠标悬停在某个元素上时，我们可能需要显示一个不同的图标。或者，当用户点击某个按钮时，我们可能需要显示一个不同的状态图标。传统的方法是使用多个 <img> 标签，然后根据条件来切换这些标签的 src 属性。但是，这种方法会增加 HTML 代码的冗余，也不利于代码的维护。

SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图形格式，它具有许多优点，包括：

可缩放性：SVG 图形可以任意缩放，而不会损失质量。
轻量级：SVG 图形通常比其他格式的图像文件更小。
可编辑性：SVG 图形可以使用文本编辑器或图形编辑软件进行编辑。

在 SVG 中，我们可以使用 xlink:href 属性来动态地改变图片的来源。这使得我们可以根据不同的条件来显示不同的图片，而无需使用多个 <img> 标签。

实现原理

SVG 的 xlink:href 属性允许我们指定一个外部图像文件作为 SVG 图形的源文件。当我们改变 xlink:href 属性的值时，SVG 图形就会自动加载新的图像文件。

我们可以使用 JavaScript 来动态地改变 xlink:href 属性的值。例如，当用户将鼠标悬停在某个元素上时，我们可以使用以下代码来改变 SVG 图形的 xlink:href 属性的值：

element.setAttribute('xlink:href', 'new-image.svg');

代码示例

以下是一个简单的代码示例，演示了如何使用 xlink:href 属性动态地改变 SVG 图片：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <svg width="100px" height="100px">
    <image xlink:href="image1.svg" width="100%" height="100%"/>
  </svg>

  <button id="change-image">Change Image</button>

  <script>
    const button = document.getElementById('change-image');

    button.addEventListener('click', () => {
      const svg = document.querySelector('svg');
      const image = svg.querySelector('image');

      image.setAttribute('xlink:href', 'image2.svg');
    });
  </script>
</body>
</html>