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

问题是浏览器错误

这是chrome的bug追踪器。让他们知道这件事。

请注意，我可以在maco上的stable 71和canary 73中进行repro。

不幸的是，SO帮不了你什么
如果你想花时间帮助开发者快速修复这个问题，你可以运行平分来检查是哪个提交导致了这个错误，但这又是一个浏览器错误，所以我们有点偏离主题。

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>