2

Есть некая группа 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>

Есть ли способ избавиться от этих полосок ?

7
  • этот косяк видно только в webkit в gecko нету 20 апр 2021 в 4:40
  • в Chrome не вижу артефактов. Но, генерить таким образом, кажется не совсем правильно, имхо.
    – UModeL
    20 апр 2021 в 4:53
  • @UModeL а каким образом генерить правильно ? createElementNS ? шаблонные выражения облегчают жизнь но вопрос не javascript 20 апр 2021 в 4:54
  • нет. В принципе такая фигура - это два эллипса и прямоугольник.
    – UModeL
    20 апр 2021 в 4:55
  • браузеру проще рендерить три элемента, чем 50.
    – UModeL
    20 апр 2021 в 4:58

1 ответ 1

3

Избавиться от данных артефактов возможно, если не "распирать" изображения в границы 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>

9
  • я так тоже делал - смотри - сбоку тоже есть 20 апр 2021 в 5:33
  • всё таки лиса самый лучший браузер 20 апр 2021 в 5:36
  • @MaximLensky: я в Chrome - добавил по пикселю и пропали полоски. Может от железа зависит?
    – UModeL
    20 апр 2021 в 5:37
  • железо у меня нормальное - ксеон и 32 ггб озу - скорее всего фиг знает 20 апр 2021 в 5:39
  • в threejs это вообще не проблема в svg это вообще проблема ..антиальясинг и прочее ... 20 апр 2021 в 5:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.