在 Firefox 60 或更早版本中为 SVG 剪辑路径设置动画时出现随机方块

Posted 2023-03-06

【中文标题】在 Firefox 60 或更早版本中为 SVG 剪辑路径设置动画时出现随机方块

【英文标题】：Random square appears when animating an SVG clip-path in Firefox 60 or earlier

【发布时间】：2019-10-08 03:52:22

【问题描述】：

我有一个 svg 图像，其中多个元素被剪辑路径（全部在文件中定义）剪辑。剪辑路径和其中的元素都是动画的。在 Firefox 60 或更早的版本中，这些剪辑元素之一显示为正方形，而不是正确的路径： https://i.stack.imgur.com/ITTJr.gif

它应该是这样出现的：https://i.stack.imgur.com/YQs34.gif

代码：

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 394.08 393.12">
      <defs>
        <style>
        .outer, .outer-sky, .middle, .middle-sky, .inner, .inner-sky, .foreground 
          animation-name: rotate;
          animation-timing-function: linear;
          transform-origin: 50% 50%;
          animation-iteration-count: infinite;
        
    
        .outer, .outer-sky, .foreground 
          animation-duration: 45s;
        
    
        .middle, .middle-sky 
          animation-duration: 30s;
        
    
        .inner, .inner-sky 
          animation-duration: 15s;
        
    
        .foreground, .outer-sky, .middle-sky, .inner-sky 
          animation-direction: reverse;
        
    
        .outer 
            clip-path: url(#outerClip);
        
    
        .middle 
          clip-path: url(#middleClip);
        
    
        .inner 
          clip-path: url(#innerClip);
        
    
        .outer-sky 
          fill: url(#outerGradient);
        
    
        .middle-sky 
          fill: url(#middleGradient);
        
    
        .inner-sky 
          fill: url(#innerGradient);
        
    
        .foreground 
          fill: #1c204c;
        
    
        .star 
          fill: #fff;
          animation-name: twinkle;
          animation-duration: 1.3s;
          animation-timing-function: linear;
          transform-origin: 50% 50%;
          animation-iteration-count: infinite;
          transform-box: fill-box;
        
    
        .star:nth-of-type(5n+0) 
          animation-delay: -0.5s;
        
    
        .star:nth-of-type(5n+1) 
          animation-delay: -0.75s;
        
    
        .star:nth-of-type(5n+2) 
          animation-delay: -0.25s;
        
    
        @keyframes twinkle 
          0% 
            transform: scale(1);
            opacity: 1;
           60% 
            transform: scale(1);
            opacity: 1;
           80% 
            transform: scale(0.95);
            opacity: 0;
           100% 
            transform: scale(1);
            opacity: 1;
          
        
    
        @keyframes rotate 
          0% 
            transform: rotate(0deg);
           100% 
            transform: rotate(360deg);
          
        
        </style>
    
        <clipPath id="outerClip"> 
          <path d="M75.19,103.15c-4.39,12.47-7.7,25.92-14.48,36.66-7.91,12.52-17.87,23.85-21.13,38.56-3.41,15.39-4,31.52-.7,47a85.31,85.31,0,0,0,20.42,40c10.42,11.22,26.14,15.6,36.43,27.29,4.93,5.61,8.23,12.44,12.26,18.73,12.63,19.68,32.83,34.05,55.14,41.07,21.17,6.66,42.46,5.93,64.07,3.13a78.69,78.69,0,0,0,49.6-26.78c10.11-12,16.43-26.91,27.71-37.95s26.2-18.19,36.88-30.46c16.37-18.82,19.81-50.91,12-73.82-2.39-7.07-5.82-13.77-8.16-20.87-4.3-13.09.25-26.52-3.9-39.61-2.09-6.58-5.46-12.89-10.54-17.56-8.65-7.93-21.27-12.68-31.64-17.93-10.59-5.37-20.64-11.67-29-20.19C259,59,248.56,46.15,233.28,40.13c-21.88-8.61-50.16-4.75-69.57,8-7.39,4.87-14,11.14-22.3,14.27-10.39,3.94-22,2.44-32.86,5C88.63,72,81,86.75,75.19,103.15Z3-10.59-5.37-20.64-11.67-29-20.19C259,59,248.56,46.15,233.28,40.13c-21.88-8.61-50.16-4.75-69.57,8-7.39,4.87-14,11.14-22.3,14.27-10.39,3.94-22,2.44-32.86,5C88.63,72,81,86.75,75.19,103.15Z" />
        </clipPath>
        <radialGradient id="outerGradient" cx="87.7601679%" cy="8.06021835%" fx="87.7601679%" fy="8.06021835%" r="103.2123%" gradientTransform="translate(0.877602,0.080602),scale(1.000000,0.995772),rotate(135.207489),translate(-0.877602,-0.080602)">
            <stop stop-color="#1E72B9" offset="0%"></stop>
            <stop stop-color="#374CA1" offset="100%"></stop>
        </radialGradient>
       
        <clipPath id="middleClip"> 
          <path d="M131.56,119.47a61.83,61.83,0,0,1,14.25-4.29c15.8-2.81,23.46-19.54,39-23.07,10.66-2.42,21.73,3.08,29.53,10.75,3.47,3.41,6.53,7.29,10.54,10,6.27,4.33,14.13,5.46,21.67,6.56,9.62,1.42,19.42,3,28.06,7.51s16.12,12.26,17.76,21.85c1.21,7-.78,14.27-.06,21.37.74,7.34,4.29,14.05,7.91,20.47,1.94,3.44,3.94,6.93,4.68,10.81a23.85,23.85,0,0,1-.11,8.59,37,37,0,0,1-13.46,22.44c-5.58,4.37-12.59,7.29-16.43,13.24s-3.61,13.23-5.09,20a40.92,40.92,0,0,1-49.93,31c-7.05-1.76-14.18-5.43-21.21-3.56-3.9,1-7.15,3.67-10.75,5.51-11.7,5.95-26,2.95-37.89-2.67-18.17-8.61-34.25-24.59-36.95-44.52-.83-6.15-.37-12.4-1.06-18.57s-2.75-12.55-7.51-16.53c-3.26-2.72-7.64-4.2-10.06-7.69-3.37-4.83-1.63-11.58,1.41-16.62s7.29-9.46,9.11-15.06c1.58-4.82,1.19-10,1.36-15.1.36-11.28,3.69-22.66,10.6-31.59C120.57,125.59,125.82,122,131.56,119.47Z" />
        </clipPath>
        <radialGradient id="middleGradient" cx="87.1592657%" cy="0%" fx="87.1592657%" fy="0%" r="115.307406%" gradientTransform="translate(0.871593,0.000000),scale(0.989524,1.000000),rotate(127.766222),translate(-0.871593,-0.000000)">
            <stop stop-color="#15A781" offset="0%"></stop>
            <stop stop-color="#15A681" offset="34.7550622%"></stop>
            <stop stop-color="#1B8BA1" offset="100%"></stop>
        </radialGradient>
    
        <clipPath id="innerClip"> 
          <path d="M213,148.4c-.64,0-1.29.09-1.93.17-5.09.6-10.32,1.78-15.26.43-2.3-.64-4.42-1.79-6.68-2.56-5.58-1.9-13.69-.58-18.27,3.14-5.53,4.51-7,12.4-11.6,17.84-3.38,4-8.33,6.47-11.4,10.7-3.46,4.75-4,11-4,16.86,0,2.6.12,5.31,1.36,7.6,1.79,3.32,5.56,5.06,8,8,3.91,4.8,3.43,11.72,5.3,17.63A22.8,22.8,0,0,0,178,243.66c5.21.38,10.48-1.09,15.66-.34,4.18.6,8.05,2.62,12.21,3.39,9.76,1.82,20.38-4.33,23.67-13.7,1.13-3.22,1.48-6.71,2.94-9.8,4.18-8.79,16.64-12.85,17.67-22.54.94-8.87-7.35-13.76-11.43-20.46-4.65-7.64-4.07-18-9.3-25.05C225.4,149.73,219.34,148,213,148.4Z" />
        </clipPath>
         <radialGradient  id="innerGradient" cx="-6.12176208%" cy="0.279661765%" fx="-6.12176208%" fy="0.279661765%" r="156.069259%" gradientTransform="translate(-0.061218,0.002797),scale(0.953303,1.000000),rotate(37.294692),translate(0.061218,-0.002797)">
              <stop stop-color="#FFCD54" offset="0.0844594595%"></stop>
              <stop stop-color="#FFA440" offset="100%"></stop>
          </radialGradient>
      </defs>
    
      <title>Stargazing</title>
      <g class="outer">
        <circle class="outer-sky" cx="50%" cy="50%" r="41%" />
      </g>
      <g class="middle">
        <circle class="middle-sky" cx="50%" cy="50%" r="28%" />
      </g>
      <g class="inner">
        <circle class="inner-sky" cx="50%" cy="50%" r="14%"/>
      </g>
      <g class="outer">
          <path class="foreground" d="M315.45,357.22s-37.57-29.74-37.05-30.41L263.11,314.4c-6.29-5.11-13-11-15.3-18.48A6.41,6.41,0,0,0,243,291.5c-.63-.13-1.25-.29-1.87-.47l-3-19.69,0-.18a.74.74,0,0,0,.45-.2l16.25-15a.8.8,0,0,0,.19-.9l-2.86-6.51a.79.79,0,0,0-1.32-.2l-17.1,19.59a.8.8,0,0,0,.23,1.22l.87.45-.11.13-6.45,14.15a31.09,31.09,0,0,1-5.91-7.22,6.34,6.34,0,0,0-6.43-3,27.76,27.76,0,0,1-7.83.09c0-.28,0-.55.05-.84,1.26-21.89.69-34.36.33-39.21a8.07,8.07,0,0,0-1.3-3.81h.2a.64.64,0,0,0,.64-.7l-1-12.23a.42.42,0,0,1,.83-.1v0l2.58,17.61a.65.65,0,0,0,.64.55h1.11c.06,1,.5,1.5.63,3.33.17,2.32,1.4,0,1.71-3.33h.5a.64.64,0,0,0,.63-.74L213,216.09a16.23,16.23,0,0,0-9.28-12.36,15.92,15.92,0,0,0-3.33-1.12c-.34-.07-.68-.11-1-.16l-.15-.7c-.17-.84.67-1.14.67-2.83s-.66-3.41-3.67-3.41c-2.16,0-2.29,2.34-2.29,3.34a3.45,3.45,0,0,0,.7,2,1.65,1.65,0,0,1,.16,1c0,.22.1.43,0,.6a16.18,16.18,0,0,0-13.86,13.68l-2.71,18.18a.64.64,0,0,0,.64.74h.49c.3,3.32,1.53,5.65,1.7,3.33.13-1.83.57-2.36.64-3.33h1.07a.65.65,0,0,0,.64-.55L186,216.85v0a.42.42,0,0,1,.83.1l-1,12.23a.64.64,0,0,0,.64.7h.64a8.07,8.07,0,0,0-1.3,3.81c-.36,4.84-.93,17.29.32,39.13l-19.3,5.55a6.44,6.44,0,0,0-4.44,4.71,7.15,7.15,0,0,1-4.6,5.15c-2.86.91-6.28,0-8.73,1.71-1.47,1-2.2,2.8-2.89,4.47a230,230,0,0,1-15.25,30.48c-1.24,2.08-3.39,4.48-5.18,6.86-13.7,10.52-18.63,21.05-5,25.35m74.85-86.51a11.22,11.22,0,0,0-1.64.14,189.48,189.48,0,0,1,2.76-28.2.41.41,0,0,1,.82,0,186.8,186.8,0,0,1,2.77,29.08A14.84,14.84,0,0,0,195.63,270.54ZM235.57,272l3.81,18.47a32,32,0,0,1-9.51-5.26Z"/>
      </g>
        <path class="star" d="M134.27,152.31l-1.82.07a3.61,3.61,0,0,1-.94,2.59,3.2,3.2,0,0,1-1.18.81,2.53,2.53,0,0,1-1.3.13,2.34,2.34,0,0,1-1.16-.59,1.94,1.94,0,0,1-.65-1.27,4.65,4.65,0,0,1,.17-1.64,5,5,0,0,1-1.15-.27,2.5,2.5,0,0,1-.81-.49,1.8,1.8,0,0,1-.61-1.42,2.42,2.42,0,0,1,.73-1.58,2.77,2.77,0,0,1,1-.69,1.82,1.82,0,0,1,1-.13,1.7,1.7,0,0,1,.89.44,1.77,1.77,0,0,1,.59,1.29,6,6,0,0,1-.3,1.79c.7,0,1.5,0,2.39,0a6.79,6.79,0,0,0-.61-1.52l1.27-.24a6.85,6.85,0,0,1,.58,1.7l1.88-.09Zm-6.57-1a4.26,4.26,0,0,0,.2-1.24,1.08,1.08,0,0,0-.35-.83.79.79,0,0,0-.63-.24,1,1,0,0,0-.65.34,1,1,0,0,0-.3.74.9.9,0,0,0,.32.69A2.57,2.57,0,0,0,127.7,151.27Zm3.56,1.17c-1.17,0-2.12.06-2.85,0a3.14,3.14,0,0,0-.1,1.05,1.12,1.12,0,0,0,.37.74,1.23,1.23,0,0,0,1,.36,1.56,1.56,0,0,0,1-.52A2.42,2.42,0,0,0,131.26,152.44Z"/>
        <path class="star" d="M96.07,105.1l-.55,1.5-2.89-1.07-1.06,2.85-1.41-.52L91.22,105l-2.87-1.06.56-1.49,2.87,1.06,1.06-2.87,1.41.52L93.19,104Z"/>
        <path class="star" d="M156.34,80.21a1.36,1.36,0,0,1,1.22,1.32,1.18,1.18,0,0,1-1.25,1.16,1.3,1.3,0,0,1-.86-.43,1.21,1.21,0,0,1-.36-.88,1.12,1.12,0,0,1,.38-.83A1.16,1.16,0,0,1,156.34,80.21Zm3.5,3.82a1.18,1.18,0,0,1,.85.42,1.41,1.41,0,0,1,.27.4c0,.13.11.31.17.53l.63,2.28-.83.77-.87-2A1.14,1.14,0,0,1,159,86a1.23,1.23,0,0,1-.36-.87,1.15,1.15,0,0,1,.38-.82A1.19,1.19,0,0,1,159.84,84Z"/>
        <path class="star" d="M272.07,184.08a1.21,1.21,0,0,1,.34.89,1.25,1.25,0,0,1-.34.91,1.12,1.12,0,0,1-.86.36,1.13,1.13,0,0,1-.84-.37,1.25,1.25,0,0,1-.34-.9,1.21,1.21,0,0,1,.34-.89,1.21,1.21,0,0,1,1.7,0Z"/>
        <path class="star" d="M94.64,176.35a1.25,1.25,0,0,1,.34.89,1.3,1.3,0,0,1-.34.91,1.15,1.15,0,0,1-.86.36,1.1,1.1,0,0,1-.85-.37,1.29,1.29,0,0,1-.34-.9,1.25,1.25,0,0,1,.34-.89,1.15,1.15,0,0,1,.85-.35A1.18,1.18,0,0,1,94.64,176.35Z"/>
        <path class="star" d="M125.23,294.86a1.21,1.21,0,0,1,.34.89,1.25,1.25,0,0,1-.34.91,1.21,1.21,0,0,1-1.71,0,1.3,1.3,0,0,1-.33-.9,1.24,1.24,0,0,1,.33-.89,1.22,1.22,0,0,1,1.71,0Z"/>
        <path class="star" d="M312.8,145.2a.87.87,0,0,1-.11.66.89.89,0,0,1-.53.43.77.77,0,0,1-.64-.08.82.82,0,0,1-.39-.52.9.9,0,0,1,.12-.67.84.84,0,0,1,.51-.42.87.87,0,0,1,1,.6Zm2.36-6.76,1.32.77L315.41,141l-2,2.92-.85-.49,1.55-3.2Z"/>
        <path class="star" d="M299,237.82a2.56,2.56,0,0,1,1.16-1.62,2.86,2.86,0,0,1,1.8-.59,1.84,1.84,0,0,1,1.43.88,2.1,2.1,0,0,1,.33.76,2.15,2.15,0,0,1,0,.71c0,.21-.09.48-.17.81a5,5,0,0,0-.18,1.06,1.53,1.53,0,0,0,.28.85l-1,.69a2.41,2.41,0,0,1-.36-.79,2.15,2.15,0,0,1-.06-.69,6.12,6.12,0,0,1,.14-.77,3.87,3.87,0,0,0,.13-.89,1.2,1.2,0,0,0-.24-.69.86.86,0,0,0-.65-.42,1.33,1.33,0,0,0-.82.28,1.25,1.25,0,0,0-.55.74,1.23,1.23,0,0,0,.22.92l-1,.7A2.49,2.49,0,0,1,299,237.82Zm5.46,4a.88.88,0,0,1,.55.37.91.91,0,0,1,.16.66.77.77,0,0,1-.35.55.75.75,0,0,1-.63.12.89.89,0,0,1-.56-.38.86.86,0,0,1-.15-.65.85.85,0,0,1,1-.67Z"/>
        <path class="star" d="M223.13,124.18a1.24,1.24,0,0,1,.33.89,1.27,1.27,0,0,1-.33.91,1.15,1.15,0,0,1-.86.36,1.1,1.1,0,0,1-.85-.37,1.29,1.29,0,0,1-.34-.9,1.25,1.25,0,0,1,.34-.89,1.15,1.15,0,0,1,.85-.34A1.17,1.17,0,0,1,223.13,124.18Z"/>
        <path class="star" d="M223.13,124.18a1.24,1.24,0,0,1,.33.89,1.27,1.27,0,0,1-.33.91,1.15,1.15,0,0,1-.86.36,1.1,1.1,0,0,1-.85-.37,1.29,1.29,0,0,1-.34-.9,1.25,1.25,0,0,1,.34-.89,1.15,1.15,0,0,1,.85-.34A1.17,1.17,0,0,1,223.13,124.18Z"/>
        <g class="star">
          <path d="M246.85,134.28l.37.86-1.66.71.7,1.63-.81.35-.7-1.64-1.64.71-.37-.86,1.65-.7-.71-1.65.81-.35.71,1.65Z"/>
          <path d="M245,141.2a5.41,5.41,0,0,1-2.09-.41,5.62,5.62,0,0,1-.12-10.37,5.63,5.63,0,0,1,7.37,3h0A5.61,5.61,0,0,1,245,141.2Zm0-10.37a4.75,4.75,0,0,0-1.76,9.16,4.67,4.67,0,0,0,3.63,0,4.75,4.75,0,0,0-1.87-9.12Z"/>
        </g>
        <path class="star" d="M65.66,240.37a2.56,2.56,0,0,1,1,1,3.13,3.13,0,0,1,0,3,2.52,2.52,0,0,1-1,1,3.06,3.06,0,0,1-1.51.35,3.14,3.14,0,0,1-1.53-.35,2.46,2.46,0,0,1-1-1,3.13,3.13,0,0,1,0-3,2.5,2.5,0,0,1,1-1,3.14,3.14,0,0,1,1.53-.36A3.07,3.07,0,0,1,65.66,240.37ZM63,241.63a1.92,1.92,0,0,0,0,2.42,1.59,1.59,0,0,0,2.26,0,1.92,1.92,0,0,0,0-2.42,1.59,1.59,0,0,0-2.26,0Z"/>
        <path class="star" d="M122.72,246.79l1.53-2.73,3.11.32.65,1.25-2.38-.17,1.57,3-1,.54-1.57-3-1.23,2Z"/>
        <path class="star" d="M239.24,74.35l-2-1.16,1.21-.63L241.18,74l-.36,3.09-1.21.63.18-2.28-3.09,1.6L236.13,76Z"/>
    </svg>

在旧版浏览器上是否有解决方案和/或方法可以使用静态图像作为后备？

【问题讨论】：

也许尝试将所有动画转换为 SMIL。

这似乎是 Firefox 的回归。动画在 Firefox v55 和 v49 中看起来不错。您是否尝试过制作最小的测试用例？很奇怪，只有一层有这个问题。您是否尝试过添加另一个 @keyframes 并反转帧，而不是使用 animation-direction:reverse 表示“.foreground”？

【参考方案1】：

我想通了！看起来旧版本的 firefox 根据元素的宽度/高度在元素周围绘制了某种边界框，并且该框不会与元素本身一起动画。我通过将元素放在一个与整个视图框一样宽/大的不可见矩形组中来修复它。