主页 / 问题 / 1272325
Accepted
Monkey Mutant
Asked:2022-04-20 12:36:04 +0000 UTC2022-04-20 12:36:04 +0000 UTC

在 SVG 中制作动画时的伪影

  • 772

有一个特定的组g，在里面我在 javascript 中生成了一堆椭圆，然后在 css 中使用通常沿 Y 轴的偏移量进行动画处理

这不是问题，但有一些条纹

let wrapper = document.querySelector(".wrapper");
let ocum = "";
for (let i = 0; i < 50; i++) {
  ocum += `<ellipse cx="300" cy="0" rx="200" ry="50" />`;
}
wrapper.innerHTML = ocum;
wrapper.querySelectorAll("ellipse").forEach(function(el, i) {
  el.setAttribute("cy", `${i}`);
});
html,
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  transform-origin: 300px 100px;
  transform: rotateX(140deg);
  animation: move 4s linear infinite;
}

@keyframes move {
  0%,
  100% {
    transform: translateY(0) rotateX(140deg);
  }
  50% {
    transform: translateY(-50px) rotateX(140deg);
  }
}

.wrapper ellipse {
  stroke: blue;
  stroke-width: 2;
}

.wrapper ellipse:last-child {
  fill: #1212e3;
}
<svg viewBox="0 0 600 400" id="svg" width="500">
  <g class="wrapper"></g>
</svg>

有没有办法摆脱这些条纹？

svg

1 个回答

  1. Best Answer

    如果您不将图像“爆裂”到viewBox边框中，但保留至少 1px 的距离，则可以摆脱这些伪影。

    好吧，通过减少同时动画元素的数量来稍微减少渲染的负载：

    let wrapper = document.querySelector(".wrapper");
let ocum = `
  <ellipse cx="300" cy="1" rx="200" ry="50" />
  <rect x="100" y="0" width="400" height="50" />
  <ellipse cx="300" cy="49" rx="200" ry="50" />`;

wrapper.innerHTML = ocum;
    html, body { margin: 0; padding: 0; }

.wrapper {
  transform-origin: 300px 100px;
  transform: translateY(0) rotateX(140deg);
  animation: move 4s linear infinite;
}

@keyframes move {
  50% { transform: translateY(-50px) rotateX(140deg); }
}

.wrapper ellipse, .wrapper rect { fill: blue; }
.wrapper ellipse:last-child { fill: #1212e3; }
    <svg viewBox="0 0 600 400" id="svg" width="500">
  <g class="wrapper"></g>
</svg>

    • 3

相关问题