html - 类中的SVG动画类不起作用

Question

我正在尝试理解 SVG 动画，但是这些类存在一些问题。

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

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

我想为这两个元素设置动画，但是当我引用 group 或 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 类变为白色/非活动状态，当我将鼠标移到元素上时，它没有反应。如何使它工作？

标签： htmlcssanimationsvg