如何在保留img标签优势的同时实现SVG hover动画？

想要既保留<img>引用外部SVG的缓存、搜索引擎检索、无障碍访问这些优势，又给SVG特定部分加hover动画，有几个实用方案：

1. 用CSS mask/clip-path做简单动画（适合颜色切换） #

如果只是要给SVG里的特定区域改颜色、调透明度这类简单效果，不需要动SVG本身，给<img>套个容器，用伪元素叠加一层，通过mask引用SVG里的目标元素来限定生效区域：

.svg-wrap {
  position: relative;
  display: inline-block;
}
.svg-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* 引用SVG里目标元素的ID，前提是SVG里给对应元素加了id */
  mask: url('your-svg.svg#target-shape');
  -webkit-mask: url('your-svg.svg#target-shape');
  background: #ff4444;
  opacity: 0;
  transition: opacity 0.3s;
}
.svg-wrap:hover::after {
  opacity: 1;
}

<div class="svg-wrap">
  <img src="your-svg.svg" alt="你的SVG描述文本">
</div>

注意：如果SVG在别的域名下，得确保服务器开了CORS，不然mask读不到资源。这个方法只能做简单的颜色/透明度动画，复杂的路径变形搞不了。

2. 用<object>标签替代<img> #

<object>能像<img>一样引用外部SVG（缓存、搜索引擎能检索），同时允许访问SVG内部元素，算是折衷的最优解：

<object data="your-svg.svg" type="image/svg+xml" alt="SVG描述文本">
  <!-- 降级兼容：不支持object的浏览器显示img -->
  <img src="your-svg.svg" alt="SVG描述文本">
</object>

然后直接在SVG文件里加<style>写hover动画：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    #target-path:hover {
      fill: #ff4444;
      transform: scale(1.1);
      transition: all 0.3s ease;
    }
  </style>
  <path id="target-path" d="M10,50 L50,10 L90,50 L50,90 Z" fill="#333" />
</svg>

优势：完全保留外部SVG的所有优势，能实现任意复杂的内部元素动画；alt属性通过<object>本身或者内部的<img>保证无障碍访问。要是SVG和页面同域，也可以把样式写在外部CSS文件里，不用塞SVG里。

3. JS动态转内联SVG（兼顾缓存与全量动画） #

先靠<img>加载SVG吃缓存，页面加载完再把<img>换成内联SVG，同时把原img的alt转成SVG的无障碍属性：

document.addEventListener('DOMContentLoaded', () => {
  const svgImgs = document.querySelectorAll('img.svg-animate');
  svgImgs.forEach(img => {
    const altText = img.alt;
    fetch(img.src)
      .then(res => res.text())
      .then(svgStr => {
        const parser = new DOMParser();
        const svgDoc = parser.parseFromString(svgStr, 'image/svg+xml');
        const svg = svgDoc.querySelector('svg');
        
        // 保留无障碍属性
        if (altText) {
          svg.setAttribute('aria-label', altText);
          const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
          title.textContent = altText;
          svg.prepend(title);
        }
        
        // 替换img
        img.replaceWith(svg);
      });
  });
});

之后就能用外部CSS随便写hover样式了：

#target-path:hover {
  fill: #ff4444;
  stroke-width: 2;
  transition: all 0.3s;
}

优势：利用了<img>的缓存，转内联后能实现所有CSS支持的SVG动画，同时通过代码保留了无障碍属性；搜索引擎抓取时能识别原<img>的alt内容。注意跨域的话要服务器开CORS。

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