Попытка "transform: rotate ()" <circle>элемента с использованием styled-компонентов

Question

CodeSandbox с примером:

https://codesandbox.io/s/floral-surf-l7m0x

Я пытаюсь повернуть элемент 180 * circle внутри SVG. Я могу сделать это с помощью обычного тега <circle>, но я не могу сделать это с помощью стилизованного компонента styled.circle

LS.Svg_SVG = styled.svg`
  border: 1px dotted silver;
  width: 100px;
  height: 100px;
`;

LS.Circle_CIRCLE = styled.circle`
  stroke-dasharray: 289.0272;
  stroke-dashoffset: -144.5136;
  transform: rotate(180 50 50);             /* <------------ IT DOES NOT WORK */
`;

export default function App() {
  return (
    <React.Fragment>
      <LS.Container_DIV>
        <LS.Svg_SVG viewBox="100 100">
          <circle                            /* USING REGULAR <circle> */
            cx="50"
            cy="50"
            r="46"
            stroke="black"
            strokeWidth="8px"
            fill="none"
            strokeDasharray="289.0272"
            strokeDashoffset="-144.5136"
            transform="rotate(180 50 50)"   /* <----------------- IT WORKS */
          />
        </LS.Svg_SVG>
      </LS.Container_DIV>
      <LS.Container_DIV>
        <LS.Svg_SVG viewBox="100 100">
          <LS.Circle_CIRCLE                 /* USING STYLED COMPONENTS */
            cx="50"
            cy="50"
            r="46"
            stroke="black"
            strokeWidth="8px"
            fill="none"
          />
        </LS.Svg_SVG>
      </LS.Container_DIV>
    </React.Fragment>
  );
}

Результат, который я получаю:

Они должны быть одинаковыми. Первый вращается (используя обычный <circle>). Второй не вращается (используя styled-components). Хотя я устанавливаю transform: rotate(-180 50 50); в стилизованном компоненте.

Answer 1

1. В CSS требуются единицы (ie. 180deg, 50px)

2. Спецификация SVG для c версии вращения: rotate(angle, cx, cy), не поддерживается в CSS версии transform. Вам нужно будет использовать transform-origin.

   LS.Circle_CIRCLE = styled.circle`
     stroke-dasharray: 289.0272;
     stroke-dashoffset: -144.5136;
     transform: rotate(180deg);
     transform-origin: 50px 50px;
   `;