Question

我需要灵活的旋转居中SVG。

问题是如果使用

<svg width="100%">

旋转后，浏览器窗口将根据svg旋转调整自身大小。

如果我删除“ width =” 100％“”，则SVG不会在水平窗口调整大小时缩小svg。

有什么解决办法吗？

Codesandbox示例。

Answer 1

将动画放入svg中是一种解决方案。

    <svg
      viewBox="0 0 29.892 29.892"
      width="100%"
      height="100vh"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
    <g>
      <path
        d="m14.946 0c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-1e-3 -8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634s11.633 5.209 11.633 11.634c0 6.426-5.208 11.634-11.633 11.634z"
        opacity=".2"
      />
      <path d="m20.758 4.878 1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012v3.312c2.119 0 4.1 0.576 5.812 1.566z"/>
        <animateTransform repeatCount="indefinite" begin="0s" dur="5s" attributeName="transform" type="rotate" from="0 14.946 14.946" to="360 14.946 14.946" />
    </g>
    </svg>

如果您想让CSS控制动画，则仍然必须将svg中的路径分组。然后，您可以按如下所示在CSS中定位该组。

#circle {
  animation: rotate 2s linear infinite;
  transform-origin: 50% 50%
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

 <svg
      viewBox="0 0 29.892 29.892"
      width="100%"
      height="100vh"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g id="circle">
        <path
          d="m14.946 0c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-1e-3 -8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634s11.633 5.209 11.633 11.634c0 6.426-5.208 11.634-11.633 11.634z"
          opacity=".2"
        />
        <path d="m20.758 4.878 1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012v3.312c2.119 0 4.1 0.576 5.812 1.566z" />
      </g>
    </svg>

灵活的旋转定心SVG

1 个答案: