尝试使用 styled-components "transform: rotate()" 一个 <circle> 元素

Question

CodeSandbox 示例：

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

我正在尝试将 SVG 中的 circle 元素旋转 180º。我可以用常规的 <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

在 CSS 中，需要单位（即 180 度、50 像素）

旋转的 SVG 特定版本：rotate(angle, cx, cy)，在 transform 的 CSS 版本中不受支持。您需要使用 transform-origin.

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

尝试使用 styled-components "transform: rotate()" 一个 <circle> 元素

Trying to "transform: rotate()" a <circle> element using styled-components

css

svg

rotation

css-transforms

styled-components