SVG 矩形在 Firefox 中而不是 Chrome/Safari 中组合在一起

Posted 2023-03-06

【中文标题】SVG 矩形在 Firefox 中而不是 Chrome/Safari 中组合在一起

【英文标题】：SVG rectangles pushed together in Firefox but not Chrome/Safari

【发布时间】：2019-06-21 16:44:17

【问题描述】：

我有一个 SVG 动画。它工作得很好（或者至少现在需要的），但是当我在 Firefox 中查看它时，SVG 的第二个和第三个矩形被压在一起。

不知道为什么，因为它在 Chrome/Safari 中很好。我认为这可能与 transform: scaleY 有关，但不是 100% 确定。

如果有人能告诉我为什么/如何解决，那就太好了。

旁注：如果有人知道如何在停止/启动时对平滑度进行排序，那太棒了，但这可能是另一个问题。

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"  />
      <rect fill="url(#grad1)" rx="2px" ry="1px"x="8.57" y="1.85"  />
      <rect fill="url(#grad1)" rx="2px" ry="1px"x="11.43" y="5.18"  />
      <rect fill="url(#grad1)" rx="2px" ry="1px"y="6.13"  />
      <rect fill="url(#grad1)" rx="2px" ry="1px"x="5.71"  />
    </g>
  </g>  
</svg>

【问题讨论】：

这似乎是 Firefox 中的一个错误。

我明白了，谢谢。那我得想个办法了。

在这里报告了这个错误：bugzilla.mozilla.org/show_bug.cgi?id=1523343

您可以通过在x 坐标中使用整数来避免此错误（有关示例，请参见错误报告）。

【参考方案1】：

正如我在上面的评论中提到的。对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"  />
      <rect fill="url(#grad1)" rx="20px" ry="1px" x="86" y="18.5"  />
      <rect fill="url(#grad1)" rx="20px" ry="1px" x="114" y="51.8"  />
      <rect fill="url(#grad1)" rx="20px" ry="1px" y="61.3"  />
      <rect fill="url(#grad1)" rx="20px" ry="1px" x="57"  />
    </g>
  </g>  
</svg>

【讨论】：

感谢 Paul，这确实解决了问题，让我省了很多麻烦！