尝试使用样式组件“转换：旋转（）”一个 <circle> 元素答案

【问题标题】：Trying to "transform: rotate()" a <circle> element using styled-components尝试使用样式组件“转换：旋转（）”一个 <circle> 元素
【发布时间】：2020-07-03 20:35:15
【问题描述】：

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);。

【问题讨论】：

在 CSS 中你应该尝试transform:rotate(180deg); transform-origin: center center;

标签： css svg rotation css-transforms styled-components

【解决方案1】：

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

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

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

【讨论】：

谢谢，保罗。我对此一无所知。