我可以使用 svg 模式创建具有旋转对称性的形状吗？答案

【问题标题】：Can I use svg pattern to create shapes with rotational symmetry?我可以使用 svg 模式创建具有旋转对称性的形状吗？
【发布时间】：2017-11-13 21:42:32
【问题描述】：

我正在制作一个动画代码战徽标。它看起来很适合我的项目：https://codepen.io/forTheLoveOfCode/pen/GOERRE

但是，下面的代码块肯定可以在不复制和粘贴同一行的情况下重写。然而，无论是我的研究，还是猜测“transform=rotate”可以放在 SVG 模式中的什么位置，都没有给我任何结果。有什么想法可以用更少的行数达到相同的结果吗？

<svg class="codewars" width="300" height="300">
    <path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"/>
    <path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(60, 150, 150)"/>
    <path d="M148 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(120, 150, 150)"/>
    <path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(180, 150, 150)"/>
    <path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(240, 150, 150)"/>
    <path d="M148 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(300, 150, 150)"/>

【问题讨论】：

标签： css html animation svg

【解决方案1】：

你走错了路，<use> 是你想要的，而不是模式。

.codewars{
  stroke:red;
  stroke-dasharray: 0.1em;
}

<svg class="codewars" width="320" height="320">
  <defs>
      <path id="curve" d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"/>
  </defs>
  <use href="#curve"/>
  <use href="#curve" transform="rotate(60, 150, 150)"/>
  <use href="#curve" transform="rotate(120, 150, 150)"/>
  <use href="#curve" transform="rotate(180, 150, 150)"/>
  <use href="#curve" transform="rotate(240, 150, 150)"/>
  <use href="#curve" transform="rotate(300, 150, 150)"/>
</svg>

【讨论】：

谢谢你们，喜欢答案。
在我使用后，动画开始围绕非中心旋转。任何想法为什么会发生？见codepen：codepen.io/forTheLoveOfCode/pen/EbXaNv
我认为您可能应该单独询问。基本上你的绘图不在中心，绘图是 320 x 320，但形状不在 (160, 160)。我怀疑您还需要 transform-box: fill-box 因为您目前正在编写 Chrome 错误。
谢谢，我确实弄清楚了，但只是在我提出问题之后。终笔：codepen.io/forTheLoveOfCode/pen/EbXaNv