变换在 SVG 中旋转路径

Question

虽然 svg 正在移动，但我需要 #winga 围绕顶部中心原点旋转（左右）。但是我不能向任何方向旋转它。

svg {
  position: fixed;
  left: 50vw;
  top: 25px;
  width: 70%;
  height: 70%;
  animation: a01 9s;
  background: #0099cc;
}

@keyframes a01 {
  from {}
  to {
    left: 0;
  }
}

#winga {
  fill: gold;
  transform-origin: top center;
  animation: awinga 25s;
}

@keyframes awinga {
  from {};
  to {
    transform: rotate(30deg);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1280 720">
  <path id='winga' d="M100 0 L150 0 L150 300 L100 300 Z" />
</svg>

Answer 1

您的代码在 keyframes 中的 from 之后有 ;。重写代码后，我找到并删除了它，它现在应该可以工作了。

svg {
  position: fixed;
  left: 50vw;
  top: 25px;
  width: 70%;
  height: 70%;
  animation: a01 9s;
  background: #0099cc;
}

@keyframes a01 {
  from {}
  to {
    left: 0;
  }
}

#winga {
  fill: gold;
  transform-origin: top center;
  animation: awinga 25s;
}

@keyframes awinga {
  from {}
  to {
    transform: rotate(30deg);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1280 720">
  <path id='winga' d="M100 0 L150 0 L150 300 L100 300 Z" />
</svg>

变换在 SVG 中旋转路径

Transform rotate a path inside a SVG

svg

rotation

css-transforms

css-animations