Прямоугольники SVG объединены в Firefox, но не в Chrome / Safari - PullRequest
Новая
       22

Прямоугольники SVG объединены в Firefox, но не в Chrome / Safari

0 голосов
/ 28 января 2019

У меня есть SVG, который я анимировал.Он работает нормально (или, по крайней мере, так же, как это нужно сейчас), однако, когда я смотрю на него в Firefox, 2-й и 3-й прямоугольники SVG сжимаются вместе.

Понятия не имею почему, так какхорошо в Chrome / Safari.Я думаю, что это может быть связано с transform: scaleY, но не уверен на 100%.

Если кто-нибудь может сказать мне, почему / как это исправить, это было бы здорово.

Sidenote: Если кто-то знает, как сортировать плавность, когда она останавливается / запускается, это здорово, но это может быть другой вопрос.

Codepen: https://codepen.io/Will5592/pen/WPQQKB

const svg = document.querySelectorAll('rect');

svg.forEach(item => {
  item.addEventListener('click', (e) => {
    svg.forEach(i => i.classList.toggle('animation-on'))
  })
})
body {
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  width: 25vw;
  height: 25vh;
  cursor: pointer;
}

.animation-on {
  animation: updown 0.75s infinite linear;
}

rect {
  transform-origin: 0 50%;
  transform: scaleY(0.75);
}

rect:nth-child(1) {
  animation-delay: 0.05s;
}

rect:nth-child(2) {
  animation-delay: 0.075s;
  animation-duration: 0.65s;
}

rect:nth-child(3) {
  animation-delay: 0.10s;
  animation-duration: 0.75s;
}

rect:nth-child(4) {
  animation-delay: 0.125s;
  animation-duration: 0.75s;
}

rect:nth-child(5) {
  animation-delay: 0.15s;
  animation-duration: 0.85s;
}

@keyframes updown {
  0% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.5);
  }
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 17.5">
  
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:purple;stop-opacity:1" />
          <stop offset="100%" style="stop-color:indigo;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect fill="url(#grad1)" rx="2px" ry="1px" x="2.86" y="4" width="2.57" height="9.5"/>
      <rect fill="url(#grad1)" rx="2px" ry="1px"x="8.57" y="1.85" width="2.57" height="13.81"/>
      <rect fill="url(#grad1)" rx="2px" ry="1px"x="11.43" y="5.18" width="2.57" height="7.14"/>
      <rect fill="url(#grad1)" rx="2px" ry="1px"y="6.13" width="2.57" height="5.24"/>
      <rect fill="url(#grad1)" rx="2px" ry="1px"x="5.71" width="2.57" height="17.5"/>
    </g>
  </g>  
</svg>

1 Ответ

0 голосов
/ 28 января 2019

Как уже упоминалось в моем комментарии выше.Использование целых чисел для координаты x кажется решением этой проблемы.

В приведенном ниже примере я умножил все значения координат на 10 и округлил координату x. 

const svg = document.querySelectorAll('rect');

svg.forEach(item => {
  item.addEventListener('click', (e) => {
    svg.forEach(i => i.classList.toggle('animation-on'))
  })
})
body {
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  width: 25vw;
  height: 25vh;
  cursor: pointer;
}

.animation-on {
  animation: updown 0.75s infinite linear;
}

rect {
  transform-origin: 0 50%;
  transform: scaleY(0.75);
}

rect:nth-child(1) {
  animation-delay: 0.05s;
}

rect:nth-child(2) {
  animation-delay: 0.075s;
  animation-duration: 0.65s;
}

rect:nth-child(3) {
  animation-delay: 0.10s;
  animation-duration: 0.75s;
}

rect:nth-child(4) {
  animation-delay: 0.125s;
  animation-duration: 0.75s;
}

rect:nth-child(5) {
  animation-delay: 0.15s;
  animation-duration: 0.85s;
}

@keyframes updown {
  0% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.5);
  }
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 175">
  
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:purple;stop-opacity:1" />
          <stop offset="100%" style="stop-color:indigo;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect fill="url(#grad1)" rx="20px" ry="1px" x="29" y="40" width="25.7" height="95"/>
      <rect fill="url(#grad1)" rx="20px" ry="1px" x="86" y="18.5" width="25.7" height="138.1"/>
      <rect fill="url(#grad1)" rx="20px" ry="1px" x="114" y="51.8" width="25.7" height="71.4"/>
      <rect fill="url(#grad1)" rx="20px" ry="1px" y="61.3" width="25.7" height="52.4"/>
      <rect fill="url(#grad1)" rx="20px" ry="1px" x="57" width="25.7" height="175"/>
    </g>
  </g>  
</svg>
...