动画时区分SVG蒙版和原始SVG形状

Question

我希望能够将SVG蒙版应用于我正在制作动画的形状，但不要让蒙版元素通过动画进行转换。换句话说，当被遮罩的形状被转换时，遮罩保持静止。

在这里的例子中，我如何将遮蔽圆的半径保持在8？

＆＃13;

＆＃13;

@keyframes ripple {
  0%{
		transform: scale(0.5);
		opacity: 0;
	}
	30%{
		opacity: 0.3;
	}
  50%{
    opacity: 0.9;
  }
	70%{
		opacity: 0.3;
	}
	100%{
		transform: scale(2.5);
		opacity: 0;
	}
}

.ripple {
  transform-origin: 50px 50px;
  animation: ripple 3s linear infinite;
}

＆＃13;

<svg>
  <defs>
    <mask id="circle-mask">
      <rect width="100%" height="100%" fill="white"/>
      <circle r="8" cx="50" cy="50" fill="black"/>
    </mask>
  </defs>

  <circle id="main-circle" class = "ripple" r="15" cx="50" cy="50" mask="url(#circle-mask)" />
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将<circle>包裹在一个组（<g>）元素中。然后将遮罩应用到组中。

@keyframes ripple {
  0%{
		transform: scale(0.5);
		opacity: 0;
	}
	30%{
		opacity: 0.3;
	}
  50%{
    opacity: 0.9;
  }
	70%{
		opacity: 0.3;
	}
	100%{
		transform: scale(2.5);
		opacity: 0;
	}
}

.ripple {
  transform-origin: 50px 50px;
  animation: ripple 3s linear infinite;
}

<svg>
  <defs>
    <mask id="circle-mask">
      <rect width="100%" height="100%" fill="white"/>
      <circle r="8" cx="50" cy="50" fill="black"/>
    </mask>
  </defs>

  <g mask="url(#circle-mask)">
    <circle id="main-circle" class = "ripple" r="15" cx="50" cy="50" />
  </g>
</svg>