SVG Transition является сбой Chrome (CSS, HTML)

Question

SVG Transition является сбой Chrome (CSS, HTML)

У меня есть переход 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>

0

html css svg css-transitions svg-animate

Источник

user4112267 13 дек '18 в 00:45

2 ответа

Другие вопросы по тегам html css svg css-transitions svg-animate

user5724303 13 дек '18 в 01:48 2018-12-13 01:48 · Answer 1 · 2018-12-13 01:48

Похоже, преобразование в однопутную 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>

user3702797 13 дек '18 в 01:34 2018-12-13 01:34 · Answer 2 · 2018-12-13 01:34

Проблема заключается в ошибке браузера.

Вот трекер ошибок хрома. Дайте им знать об этом.

Обратите внимание, что я могу воспроизвести как в стабильном 71, так и в канаре 73 на MacO.

Ничего особенного, к сожалению, не может сделать для вас...
Если вы хотите потратить время на то, чтобы помочь разработчикам быстро это исправить, вы можете запустить раздел, чтобы проверить, какой коммит вызвал эту ошибку, но опять же это ошибка браузера, так что это немного не по теме для нас.