TYPO3嵌入HTML元素后SVG路径描边动画无法播放求助

问题根源 #

1. 初始状态下，stroke-dashoffset与stroke-dasharray值相等，路径完全被隐藏，导致图标不可见
2. 缺少触发.active类的逻辑，动画无法启动
3. 外部样式在TYPO3的HTML元素中可能未正确加载

修复步骤 #

方案一：自动触发过渡动画（带JS触发） #

将过渡样式整合到SVG内部，添加页面加载时自动激活动画的脚本：

<!--?xml version="1.0" encoding="UTF-8"?-->
<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85.25 63.36" >
  <defs>
    <style>
      .cls-1 {
        stroke: #005092;
      }

      .cls-1, .cls-2 {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 3px;
      }

      .cls-2 {
        stroke: #61b22f;
      }

      /* 动画过渡样式 */
      svg .svg-elem-1 {
        stroke-dashoffset: 67.90418243408203px;
        stroke-dasharray: 67.90418243408203px;
        transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
      }

      svg.active .svg-elem-1 {
        stroke-dashoffset: 0;
      }

      svg .svg-elem-2 {
        stroke-dashoffset: 281.1118469238281px;
        stroke-dasharray: 281.1118469238281px;
        transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
      }

      svg.active .svg-elem-2 {
        stroke-dashoffset: 0;
      }
    </style>
  </defs>
  <g id="Ebene_1-2" data-name="Ebene 1">
    <path class="cls-2 svg-elem-1" d="M45.88,38.31c1.42,1.09,2.34,2.8,2.34,4.72,0,3.29-2.66,5.95-5.95,5.95-1.42,0-2.72-.5-3.74-1.33M45.88,38.31c-1-.77-2.25-1.23-3.61-1.23-3.29,0-5.95,2.66-5.95,5.95,0,1.87.86,3.53,2.21,4.62M58.63,22.09l-12.76,16.21M38.52,47.65l-4.88,6.2"></path>
    <path class="cls-1 svg-elem-2" d="M6.27,61.86c-3.04-5.74-4.77-12.29-4.77-19.23,0-11.21,4.48-21.37,11.75-28.79C20.72,6.22,31.12,1.5,42.63,1.5c22.71,0,41.13,18.41,41.13,41.13,0,6.95-1.73,13.49-4.77,19.23H6.27ZM42.2,2.06v8.29M18.59,19.28l-5.34-5.44M66.41,19.28l4.99-5.44M76.83,44.15h6.92M2.23,44.15h6.92"></path>
  </g>
  <script type="text/javascript">
    window.addEventListener('load', function() {
      document.getElementById('Ebene_2').classList.add('active');
    });
  </script>
</svg>

方案二：CSS关键帧动画（无需JS） #

如果TYPO3限制内嵌脚本，改用关键帧动画实现自动播放：

<!--?xml version="1.0" encoding="UTF-8"?-->
<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85.25 63.36" >
  <defs>
    <style>
      .cls-1 {
        stroke: #005092;
      }

      .cls-1, .cls-2 {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 3px;
      }

      .cls-2 {
        stroke: #61b22f;
      }

      /* 关键帧动画 */
      .svg-elem-1 {
        stroke-dasharray: 67.90418243408203px;
        animation: draw-elem1 1s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
      }

      @keyframes draw-elem1 {
        from { stroke-dashoffset: 67.90418243408203px; }
        to { stroke-dashoffset: 0; }
      }

      .svg-elem-2 {
        stroke-dasharray: 281.1118469238281px;
        animation: draw-elem2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s forwards;
      }

      @keyframes draw-elem2 {
        from { stroke-dashoffset: 281.1118469238281px; }
        to { stroke-dashoffset: 0; }
      }
    </style>
  </defs>
  <g id="Ebene_1-2" data-name="Ebene 1">
    <path class="cls-2 svg-elem-1" d="M45.88,38.31c1.42,1.09,2.34,2.8,2.34,4.72,0,3.29-2.66,5.95-5.95,5.95-1.42,0-2.72-.5-3.74-1.33M45.88,38.31c-1-.77-2.25-1.23-3.61-1.23-3.29,0-5.95,2.66-5.95,5.95,0,1.87.86,3.53,2.21,4.62M58.63,22.09l-12.76,16.21M38.52,47.65l-4.88,6.2"></path>
    <path class="cls-1 svg-elem-2" d="M6.27,61.86c-3.04-5.74-4.77-12.29-4.77-19.23,0-11.21,4.48-21.37,11.75-28.79C20.72,6.22,31.12,1.5,42.63,1.5c22.71,0,41.13,18.41,41.13,41.13,0,6.95-1.73,13.49-4.77,19.23H6.27ZM42.2,2.06v8.29M18.59,19.28l-5.34-5.44M66.41,19.28l4.99-5.44M76.83,44.15h6.92M2.23,44.15h6.92"></path>
  </g>
</svg>

TYPO3适配注意点 #

• 优先选择方案二，无需JS，兼容性更强
• 确保所有样式都内嵌在SVG的<defs>标签内，避免外部样式加载失效
• 直接将完整SVG代码粘贴到TYPO3的HTML元素中即可

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