时间戳

首页 > 解决方案 > 变换旋转 SVG 内的路径

svg - 变换旋转 SVG 内的路径

问题描述

在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>

标签： svgrotationcss-animationscss-transforms

解决方案

您的代码;在from. keyframes重写代码后，我发现并删除了它，它现在应该可以工作了。

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>

推荐阅读