анимация элемента SVG <path>в теге <g>

Question

Я пытаюсь использовать: наведите курсор на CSS, чтобы заставить вращаться срез круга.

CSS, который я пытаюсь использовать, заставит срез вращаться так, как я бы ожидать. Однако, когда я добавляю: hover selector, он не вращается.

My HTML и CSS ниже:

transform-origin: 190px 50px;
  transform: rotate(360deg);
  transition: transform 10s;
}

#box:hover {
  fill-opacity: 0%;
  stroke: black;
}

#circle:hover {
  transform-origin: 10% 10%;
  transform: rotate(90deg);
  transition: transform 2s;
  stroke: black;
}

<div id="divThree">
    <svg id="box" version="1.1" width="500" height="300" viewBox="0 0 500 300" xmlns="htp://www.w3.org/2000/svg">
      <g class="slice">
        <path d="M 50 50 H 190 V 190 C 190 190, 58.99 189.99, 50 50"></path>
      </g>
      <circle id="circle" cx="190" cy="50" r="140" fill-opacity="0.0" stroke="red "fill="black"/>
    </svg>
  </div>

Мой кодовый код уже здесь.

Answer 1

Ваш CSS код в порядке. Вы можете сделать #box .slice:hover.

Но вы должны взглянуть на свой SVG: перед <circle ... стоит <g class="slice">. Так что circle перекрывает ваш срез, в этом случае slice никогда не будет зависать.

Самое простое решение - просто переместить circle до среза:

<svg id="box" version="1.1" width="500" height="300" viewBox="0 0 500 300" xmlns="htp://www.w3.org/2000/svg">
    <circle id="circle" cx="190" cy="50" r="140" fill-opacity="0.0" stroke="red "fill="black"/>
    <g class="slice">
        <path d="M 50 50 H 190 V 190 C 190 190, 58.99 189.99, 50 50"></path>
    </g>
</svg>

или вы можете отключить события указателя для circle:

#box circle {
    pointer-events: none;
}

Рабочий раствор: https://codepen.io/emtei/pen/PoqObRp?editors=1100