如何为非硬编码SVG添加动画？Webpack预生成场景求助

嘿，我之前在Webpack项目里也碰到过一模一样的问题！没法直接给预处理生成的SVG加动画确实头疼，不过有几个实用的解决方案，你可以根据项目情况选：

这个方法的核心是用Webpack loader把SVG转成字符串，然后直接插入到DOM中——这样SVG就是内联的，你可以直接操作它的内部元素，不管是用CSS还是JS加动画都没问题。

步骤如下：

1. 安装raw-loader或者svg-inline-loader：

   npm install raw-loader --save-dev
   

2. 在Webpack配置里添加规则：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.svg$/,
           use: 'raw-loader' // 或者用svg-inline-loader
         }
       ]
     }
   }
   

3. 在代码里导入并插入SVG：

   import mySvgContent from './path/to/your.svg';
   
   // 找到要插入SVG的容器
   const svgContainer = document.getElementById('svg-wrapper');
   // 把SVG字符串插入到DOM
   svgContainer.innerHTML = mySvgContent;
   
   // 现在可以给内部元素加动画了！
   const targetPath = svgContainer.querySelector('path.my-target');
   targetPath.style.animation = 'spin 2s linear infinite';
   
   // 动态添加关键帧（如果需要的话）
   const styleTag = document.createElement('style');
   styleTag.textContent = `
     @keyframes spin {
       from { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
     }
   `;
   document.head.appendChild(styleTag);
   

如果你的SVG是通过Webpack处理后插入到页面的（比如作为组件的一部分），可以在SVG内部预先使用CSS变量，然后在外部通过容器元素控制这些变量，从而实现动画参数的动态调整。

1. 修改SVG文件，在内部样式中使用CSS变量：

   <svg xmlns="http://www.w3.org/2000/svg" class="animated-svg">
     <style>
       .animated-element {
         animation: dash var(--dash-duration) linear infinite;
         stroke-dasharray: 80;
       }
       @keyframes dash {
         to { stroke-dashoffset: -80; }
       }
     </style>
     <path class="animated-element" d="M10 20L30 40..." />
   </svg>
   

2. 在外部CSS中给容器设置变量：

   .svg-container {
     --dash-duration: 2s; /* 控制动画时长 */
   }
   

3. 甚至可以用JS动态修改变量：

   document.querySelector('.svg-container').style.setProperty('--dash-duration', '1.5s');
   

这个方法适合你有多个SVG图标的场景，Webpack会把所有SVG打包成一个雪碧图，然后通过<use>标签引用——引用后的SVG是内联的，同样可以直接给内部元素加动画。

1. 安装svg-sprite-loader：

   npm install svg-sprite-loader --save-dev
   

2. 配置Webpack：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.svg$/,
           use: [
             {
               loader: 'svg-sprite-loader',
               options: {
                 symbolId: 'icon-[name]' // 生成的雪碧图ID规则
               }
             }
           ]
         }
       ]
     }
   }
   

3. 导入SVG（不需要显式使用，loader会自动生成雪碧图）：

   import './icons/arrow.svg';
   import './icons/heart.svg';
   

4. 在HTML中引用SVG：

   <div class="svg-container">
     <svg width="24" height="24">
       <use xlink:href="#icon-arrow"></use>
     </svg>
   </div>
   

5. 直接用CSS给内部元素加动画：

   #icon-arrow path {
     animation: bounce 1s ease-in-out infinite;
   }
   @keyframes bounce {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-5px); }
   }
   

如果上面的方法都不适合，还可以通过JS获取到SVG元素后，直接给它的内部注入动画样式。比如：

// 假设你已经获取到了SVG元素（比如通过组件的ref或者DOM查询）
const svgElement = document.querySelector('svg.my-svg');

// 创建一个style标签，写入动画规则
const inlineStyle = document.createElement('style');
inlineStyle.textContent = `
  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
  .svg-path {
    animation: pulse 1.5s ease-in-out infinite;
  }
`;

// 把style标签插入到SVG内部
svgElement.appendChild(inlineStyle);

• 如果你用了svgo-loader（Webpack常用的SVG优化工具），要确保它没有删掉SVG内部的class、style或者ID，否则动画会失效。可以在svgo配置里添加preset-default并禁用相关清理规则。
• 内联SVG的动画性能比img标签的SVG更好，因为浏览器不需要额外请求，而且可以直接操作元素。

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