如何为mask-image中的BlackHole SVG添加旋转效果且不影响背景？

已实现主题切换功能：

• 亮色模式：使用clip-path实现背景效果
• 暗色模式：替换mask-image为BlackHole SVG，通过调整mask-position和mask-size模拟黑洞与背景的交互

当前动画运行正常，但需要为作为mask-image的BlackHole SVG添加旋转效果，且不能影响.alternate-gradient-bg容器的旋转状态。

相关代码实现 #

HTML结构 #

<div class="alternate-gradient-bg">
    <svg xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="goo">
              <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
              <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo" />
              <feBlend in="SourceGraphic" in2="goo" />
            </filter>
        </defs>
    </svg>
    <div class="alternate-gradients-container">
      <div class="alternate-g1"></div>
      <div class="alternate-g2"></div>
      <div class="alternate-g3"></div>
      <div class="alternate-g4"></div>
      <div class="alternate-g5"></div>
      <div class="alternate-interactive-container">
        <div class="alternate-interactive" ref="interBubbleRefAlternate"></div>
      </div>
    </div>
</div>

CSS样式 #

.alternate-gradient-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    background: linear-gradient(-40deg, var(--alternate-color-bg1), var(--alternate-color-bg2));
    top: 0;
    left: 0;
    z-index: -2;
    clip-path: circle(4.4% at 95.25% 90.5%);
}
.light .alternate-gradient-bg{
    clip-path: circle(150% at 95.25% 90.5%);
    mask-image: none;
    mask-composite: exclude;
    mask-repeat: no-repeat;
    mask-size: 4500px;
    mask-position: bottom -2180px right -2180px;
    transition: 1s ease-out;
}
.dark .alternate-gradient-bg{
    clip-path: circle(4.4% at 95.25% 90.5%);
    mask-image: url("/BlackHole.svg");
    mask-composite: exclude;
    mask-repeat: no-repeat;
    mask-size: 100px;
    mask-position: bottom 20px right 20px;
    transition: 1s ease-out;
}

BlackHole SVG原代码 #

<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
    <path d="m962.98 370.77c-56.961-219.76-321.69-331.88-541.46-274.92 184.24 20.664 298.97 86.176 355.24 194.2-50.43-55.348-116.43-97.625-193.78-119.01-218.79-60.547-448.26 112.65-508.82 331.46 120.71-163.71 246.33-227.99 381.5-206.97-20.238 2.7227-40.309 6.9297-59.996 12.629l0.042969 0.070312c-72.199 22.168-139.12 64.332-191.65 125.93-147.34 172.7-87.352 453.87 85.367 601.23-77.938-142.97-96.805-261.85-62.164-361.88-6.5898 50.629-3.8125 103.31 9.7656 155.71 56.977 219.76 321.71 331.88 541.48 274.92-184.21-20.652-298.95-86.133-355.21-194.13 50.441 55.289 116.43 97.555 193.73 118.96 218.81 60.535 448.27-112.66 508.84-331.47-120.73 163.76-246.35 228.01-381.53 206.97 20.254-2.7227 40.324-6.9453 60.023-12.645l-0.027343-0.027344c72.184-22.18 139.11-64.348 191.65-125.95 147.33-172.71 87.336-453.87-85.379-601.23 77.98 143.01 96.832 261.94 62.137 361.97 6.6172-50.668 3.8398-103.38-9.75-155.82z" fill-rule="evenodd"/>
</svg>

解决方案：让SVG自身带旋转动画 #

直接给.alternate-gradient-bg加transform: rotate()会影响整个背景，所以最稳妥的方式是修改BlackHole SVG，在内部添加独立的旋转动画，这样mask引用SVG时，旋转效果仅作用于mask，不会干扰容器的状态。

修改后的BlackHole SVG代码 #

<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
    <!-- 用g标签包裹路径，添加旋转动画 -->
    <g>
        <!-- 绕SVG中心(600,600)旋转，10秒一圈，无限重复 -->
        <animateTransform 
            attributeName="transform" 
            type="rotate" 
            from="0 600 600" 
            to="360 600 600" 
            dur="10s" 
            repeatCount="indefinite"
            fill="freeze"
        />
        <path d="m962.98 370.77c-56.961-219.76-321.69-331.88-541.46-274.92 184.24 20.664 298.97 86.176 355.24 194.2-50.43-55.348-116.43-97.625-193.78-119.01-218.79-60.547-448.26 112.65-508.82 331.46 120.71-163.71 246.33-227.99 381.5-206.97-20.238 2.7227-40.309 6.9297-59.996 12.629l0.042969 0.070312c-72.199 22.168-139.12 64.332-191.65 125.93-147.34 172.7-87.352 453.87 85.367 601.23-77.938-142.97-96.805-261.85-62.164-361.88-6.5898 50.629-3.8125 103.31 9.7656 155.71 56.977 219.76 321.71 331.88 541.48 274.92-184.21-20.652-298.95-86.133-355.21-194.13 50.441 55.289 116.43 97.555 193.73 118.96 218.81 60.535 448.27-112.66 508.84-331.47-120.73 163.76-246.35 228.01-381.53 206.97 20.254-2.7227 40.324-6.9453 60.023-12.645l-0.027343-0.027344c72.184-22.18 139.11-64.348 191.65-125.95 147.33-172.71 87.336-453.87-85.379-601.23 77.98 143.01 96.832 261.94 62.137 361.97 6.6172-50.668 3.8398-103.38-9.75-155.82z" fill-rule="evenodd"/>
    </g>
</svg>

关键说明 #

• 用<g>标签包裹黑洞路径，给这个组添加<animateTransform>动画
• from="0 600 600"和to="360 600 600"表示绕SVG的中心（viewBox为0 0 1200 1200，中心坐标是600,600）旋转360度
• dur="10s"控制旋转速度，可根据需求调整
• repeatCount="indefinite"让动画无限循环
• 这种方式完全独立于背景容器，不会影响.alternate-gradient-bg的任何状态

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