如何避免重复编写SVG代码实现SVG图片悬停动画？

当然有办法优化啦！你当前的写法重复了完整的SVG代码，不仅增加了代码量，后续维护也麻烦。下面给你几个实用的解决方案，按推荐程度排序：

方案1：内联SVG + CSS控制填充色（最推荐） #

把SVG直接嵌入HTML中，然后通过CSS直接控制它的fill属性，完全避免重复代码，维护起来也最直观：

HTML代码 #

<a id="twitter" href="#">
  <svg enable-background="new 0 0 612 612" version="1.1" viewBox="0 0 612 612" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
    <path d="m612 116.26c-22.525 9.981-46.694 16.75-72.088 19.772 25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.55 56.217-125.55 125.51 0 9.828 1.109 19.427 3.251 28.606-104.33-5.24-196.84-55.223-258.75-131.17-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.48-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0 60.806 43.291 111.55 100.69 123.1-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-0.803-23.634-2.333 15.985 49.907 62.336 86.199 117.25 87.194-42.947 33.654-97.099 53.655-155.92 53.655-10.134 0-20.116-0.612-29.944-1.721 55.567 35.681 121.54 56.485 192.44 56.485 230.95 0 357.19-191.29 357.19-357.19l-0.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z"/>
  </svg>
</a>

CSS代码 #

body { background-color: #181818; }

#twitter {
  transition: all .3s ease;
  width: 30px;
  height: 30px;
  display: inline-block;
}

#twitter svg {
  width: 100%;
  height: 100%;
  fill: #777;
  /* 给填充色加上过渡动画 */
  transition: fill .3s ease;
}

#twitter:hover svg {
  fill: #00aced;
}

这个方案的优势是：无需处理复杂的URL转义，直接操作SVG元素，后续要修改图标形状或颜色都非常方便。

方案2：CSS变量控制Data URI中的SVG填充色 #

如果你不想把SVG嵌入HTML，依然想用背景图的方式，可以用CSS变量来复用SVG代码，只修改填充色：

CSS代码 #

body { background-color: #181818; }

a {
  transition: all .3s ease;
  width: 30px;
  height: 30px;
  display: inline-block;
  /* 定义默认填充色变量 */
  --svg-fill: #777;
  /* SVG中的fill使用变量，注意URL编码转义：{ → %7B，} → %7D */
  background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 612 612' version='1.1' viewBox='0 0 612 612' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m612 116.26c-22.525 9.981-46.694 16.75-72.088 19.772 25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.55 56.217-125.55 125.51 0 9.828 1.109 19.427 3.251 28.606-104.33-5.24-196.84-55.223-258.75-131.17-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.48-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0 60.806 43.291 111.55 100.69 123.1-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-0.803-23.634-2.333 15.985 49.907 62.336 86.199 117.25 87.194-42.947 33.654-97.099 53.655-155.92 53.655-10.134 0-20.116-0.612-29.944-1.721 55.567 35.681 121.54 56.485 192.44 56.485 230.95 0 357.19-191.29 357.19-357.19l-0.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z' fill='%7B--svg-fill%7D'%3E%3C/path%3E%3C/svg%3E");
}

#twitter:hover {
  /* 悬停时修改变量值即可 */
  --svg-fill: #00aced;
}

HTML代码 #

<a id="twitter" href="#"></a>

这个方案的核心是把SVG中的fill值替换成CSS变量，并且对变量的大括号做URL编码，这样hover时只需要更新变量，不用重复整个SVG代码。

方案3：SVG雪碧图（适合多图标场景） #

如果你有多个需要复用的SVG图标，可以把它们合并成一个雪碧图文件，然后通过background-position定位到目标图标，再配合CSS变量或滤镜修改颜色。不过单图标场景下前两个方案更简洁。

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