SVG 过渡正在崩溃 chrome (css, html)

Question

我的网站上有一个 svg stroke-dasharray 过渡元素悬停在元素上，问题是我在元素上悬停 4-5 次，页面崩溃/变得无响应。最终我不得不杀死页面！有人知道这个问题吗？

div{
max-width: 200px;
background: tomato;
text-align:center;
}

svg {
  max-width: 100px;
  fill:none;
  stroke: #212121;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: 0;
  stroke-dasharray: 0;
  transition-duration: 850ms;
}

div:hover svg {
  stroke-dashoffset:0;
  stroke-dasharray:73;
}

<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path class="download_st0" d="M21,15v4c0,1.1-0.9,2-2,2H5c-1.1,0-2-0.9-2-2v-4"/>
<polyline class="download_st0" points="7,10 12,15 17,10 "/>
<line class="download_st0" x1="12" y1="15" x2="12" y2="3"/>
</svg>
</div>

Answer 1

问题是一个浏览器错误。

Here is chromium's bug tracker.让他们知道。

请注意，我可以在 macO 上同时使用 stable 71 和 canary 73 进行复制。

不幸的是，SO 无能为力...
如果您希望花时间帮助开发人员快速修复此问题，您可以运行 bisect 来检查导致此错误的提交，但这又是一个浏览器错误，所以有点跑题了对我们来说。

Answer 2

看起来转换为单路径svg 有帮助：

div {
  max-width: 200px;
  background: tomato;
  text-align: center;
}

svg {
  max-width: 100px;
}

path {
  fill: none;
  stroke: #212121;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: 0;
  stroke-dasharray: 0;
  transition: .85s;
}

div:hover path {
  stroke-dashoffset: 0;
  stroke-dasharray: 73;
}

<div>
  <svg id="Layer_1" viewBox="0 0 24 24"><path d="M21 15v4c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-4M7 10l5 5 5-5M12 15V3" class="download_st0"/></svg>
</div>