CSS 变换中心失衡？

Question

我正在尝试为我的汉堡包菜单动画化一点 SVG，但我遇到了一个奇怪的问题，使用 transform-origin: center center.

时变换原点稍微偏离中心

我做了一点Fiddle来演示： https://jsfiddle.net/mnicolas/8sdyg0ea/13/

svg{
  border: 1px solid black;
}

.wrap:hover svg #line1 {
  animation: one1 1s ease normal forwards;
}
.wrap:hover svg #line2 {
  animation: one2 1s ease normal forwards;
}


.wrap.b:hover svg #line1 {
  transform-origin: center center;
}
.wrap.b:hover svg #line2 {
  transform-origin: center center;
}


@keyframes one1 {
  50% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(15%) rotate(45deg);
  }
}
@keyframes one2 {
  50% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(-15%) rotate(-45deg);
  }
}

<div class="wrap a">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  
  <line id="line1" x1="10" y1="35" x2="90" y2="35" stroke="black" stroke-width="10" stroke-linecap="round" />
  <line id="line2" x1="10" y1="65" x2="90" y2="65" stroke="black" stroke-width="10" stroke-linecap="round" />
  <circle cx="50" cy="50" r="3" fill="red"/>
  
</svg>
</div>

<hr>
<div class="wrap b">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  
  <line id="line1" x1="10" y1="35" x2="90" y2="35" stroke="black" stroke-width="10" stroke-linecap="round" />
  <line id="line2" x1="10" y1="65" x2="90" y2="65" stroke="black" stroke-width="10" stroke-linecap="round" />
  <circle cx="50" cy="50" r="3" fill="red"/>
  
</svg>
</div>

有谁知道为什么会发生这种情况以及如何解决？

坦克很多！

Answer 1

旋转然后平移。

svg{
  border: 1px solid black;
}

.wrap:hover svg #line1 {
  animation: one1 1s ease normal forwards;
}
.wrap:hover svg #line2 {
  animation: one2 1s ease normal forwards;
}


 svg #line1,
 svg #line2 {
  transform-origin: center;
}

@keyframes one1 {
  50% {
    transform: translateY(15%);
  }
  100% {
    transform:  rotate(45deg) translateY(15%);
  }
}
@keyframes one2 {
  50% {
    transform: translateY(-15%);
  }
  100% {
    transform: rotate(-45deg) translateY(-15%) ;
  }
}

<div class="wrap b">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  
  <line id="line1" x1="10" y1="35" x2="90" y2="35" stroke="black" stroke-width="10" stroke-linecap="round" />
  <line id="line2" x1="10" y1="65" x2="90" y2="65" stroke="black" stroke-width="10" stroke-linecap="round" />
  <circle cx="50" cy="50" r="3" fill="red"/>
  
</svg>
</div>

CSS 变换中心失衡？

CSS transform Center out of balance?

css

svg

svg-transforms