如何为HTML中以图片形式引入的SVG添加hover状态？

当你用<img>标签引入SVG时，CSS无法直接穿透修改SVG内部元素样式（因为img是独立资源），可以试试下面几种实用方案：

1. 用CSS滤镜（Filter）调整颜色（适合单色SVG） #

如果你的SVG是单色的，直接用CSS的filter属性就能快速实现hover变色，不用额外做图。比如把图标变暗、变亮或者换色调：

.social-links a:hover img {
  /* 示例：hover时把图标变灰 */
  filter: grayscale(100%);
  /* 也可以组合其他滤镜效果 */
  /* filter: brightness(0.8); */
  /* filter: hue-rotate(90deg); */
  transition: filter 0.3s ease; /* 加过渡动画更自然 */
}

2. 切换不同状态的SVG图片 #

准备两张SVG：一张默认状态，一张hover状态，通过CSS或JS切换显示：

方案A：用背景图替换<img> #

调整HTML结构，把<img>换成带背景图的块级元素：

<div class="social-links mt-1 mb-3">
  <p>
    <a target="_blank" href="https://www.facebook.com/junomattress">
      <span class="markdown-icon facebook-icon"></span>
    </a>
  </p>
  <!-- 其他社交图标同理修改 -->
</div>

再写CSS设置背景图及hover切换：

.markdown-icon {
  display: inline-block;
  width: 24px; /* 图标实际宽度 */
  height: 24px; /* 图标实际高度 */
  background-size: contain;
  background-repeat: no-repeat;
}
.facebook-icon {
  background-image: url('/wp-content/themes/dawn-child/assets/images/icon-facebook.svg');
}
.facebook-icon:hover {
  background-image: url('/wp-content/themes/dawn-child/assets/images/icon-facebook-hover.svg');
}

方案B：用JS动态替换src属性 #

如果不想改HTML结构，用JS监听hover事件切换img的src：

const socialImgs = document.querySelectorAll('.social-links img');
socialImgs.forEach(img => {
  const defaultSrc = img.src;
  // 假设hover状态图片命名为「原文件名-hover.svg」
  const hoverSrc = defaultSrc.replace('.svg', '-hover.svg');
  
  img.addEventListener('mouseover', () => img.src = hoverSrc);
  img.addEventListener('mouseout', () => img.src = defaultSrc);
});

3. 改成内联SVG（最灵活的方式） #

如果可以修改HTML结构，把SVG直接内联到页面（不用img标签），就能直接用CSS控制SVG内部元素的hover样式：

<div class="social-links mt-1 mb-3">
  <p>
    <a target="_blank" href="https://www.facebook.com/junomattress">
      <span class="markdown-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <!-- 这里是你的SVG路径代码 -->
          <path fill="#000" d="M..."></path>
        </svg>
      </span>
    </a>
  </p>
</div>

然后写CSS修改hover时的填充色：

.social-links a:hover svg path {
  fill: #1877f2; /* 示例：hover时改成Facebook蓝色 */
  transition: fill 0.3s ease;
}

内容的提问来源于stack exchange，提问作者Jagriti Khanna