类内的SVG动画类不起作用

Question

我试图了解SVG动画，但是类存在一些问题。

HTML文档看起来像这样的方案：

<svg>
<g class="group">
<circle class="one" ... >
<path class="two" ... > etc.
</g>
</svg

我想为这两个元素设置动画，但是当我引用该组或svg时，它不起作用。在Codepen编辑器中，该类的代码为黄色（处于活动状态），但是当我将.one放置在.group类的内部时，.one类将变为被动状态（白色）。

.one,
.two {
  transition: 0.3s all;
  transform-origin: 50% 50%;
}
 

.group:hover {
    .one {
      transform: scale(0);
    }
    .two {
      transform: scale(2);
      opacity: 0;
    }
  }

以这种方式不起作用。 .one和.two类变成白色/不活动，当我将mose移到元素上时，它没有反应。该如何工作？