彩色动画有 bug svg

Question

我有一个问题，因为我正在学习 svg 并且我已经制作了一个基本动画，但我想用渐变填充第二个矩形。第二个矩形的颜色始终是灰色或黑色，无论我更改为什么颜色，即使我可以直接输入红色，它仍然是灰色的。有谁知道为什么会这样吗？

<svg width="650" height="490" viewBox="0 -27 415 190" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                          <linearGradient id="ss" gradientTransform="rotate(63)">
                            <stop offset="0%" style="stop-color:rgb(230,67,22);" />
                            <stop offset="100%" style="stop-color:rgb(101,32,70);" />
                          </linearGradient>
                      
                          <mask id="mask1">
                            <rect x="-445" y="0" width="445" height="190" fill="white">
                              <animate attributeName="x" values="-445; 0; 0; 445" keyTimes="0; 0.4; 0.8; 1" dur="15s" repeatCount="indefinite" />
                            </rect>
                            <rect x="-445" y="0" width="85" height="190" fill="url(#ss)">
                              <animate attributeName="x" values="-445; -445; 445; 445" keyTimes="0; 0.4; 0.8; 1" dur="15s" repeatCount="indefinite" />
                            </rect>
                          </mask>
                        </defs>
                      
                        <path d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z" fill="white" mask="url(#mask1)"/>
                      </svg>

我不知道为什么会发生这种情况。 如果有人能提供帮助，我会很高兴。 预先感谢您！

Answer 1

尝试从

mask

中删除

defs

。

<svg width="650" height="490" viewBox="0 -27 415 190" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="ss" gradientTransform="rotate(63)">
      <stop offset="0%" style="stop-color:rgb(230,67,22);" />
      <stop offset="100%" style="stop-color:rgb(101,32,70);" />
    </linearGradient>
  </defs>

  <rect x="-445" y="0" width="445" height="190" fill="white">
    <animate attributeName="x" values="-445; 0; 0; 445" keyTimes="0; 0.4; 0.8; 1" dur="15s" repeatCount="indefinite" />
  </rect>
  <rect x="-445" y="0" width="85" height="190" fill="url(#ss)">
    <animate attributeName="x" values="-445; -445; 445; 445" keyTimes="0; 0.4; 0.8; 1" dur="15s" repeatCount="indefinite" />
  </rect>
</svg>