Как обойти ошибку в CSS поворота SVG в Chrome 73?

ProgramBox

Как обойти ошибку в CSS поворота SVG в Chrome 73?

Post author:admin
Запись опубликована:8 мая, 2023
Post category:Вопросы по программированию

#google-chrome #animation #svg

#google-chrome #Анимация #svg

Вопрос:

Я использую изображение SVG, которое имитирует анимированный значок загрузки Google:

После установки Chrome 73 вращение SVG стало неустойчивым.

Пожалуйста, посмотрите этот код:

 <style>.circular-loading{position:absolute;top:50%;left:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);padding:10px;background:#fafafa;width:50px;height:50px;border-radius:50%;}</style>
<img src="https://www.perfumes.com.br/images/circular-loading.svg" class="circular-loading">

https://codepen.io/grudnitzki/pen/LavYWK

В Firefox и Edge вращение по-прежнему работает нормально.

Есть обходные пути?

Ответ №1:

Похоже, у них проблемы с трансляцией viewBox, а также с источником преобразования корневого <svg> элемента. Установка значения viewBox в 0 0 50 50 и перевод вашего круга на -25, а также обертывание его в <g> , которое приведет к вращению, исправляет это:

 const svg = `<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">
  <style>
    .circular{animation:rotate 2s linear infinite; transform-origin:center}
    .path{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round;}
    @keyframes rotate{100%{transform: rotate(360deg);}}
    @keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px;}}
    @keyframes color{100%,0%{stroke:#db4235;}40%{stroke:#0057e7;}66%{stroke:#008744;}80%,90%{stroke:#ffa700;}}
  </style>
  <g class="circular">
    <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
  </g>
</svg>`;
img.src = URL.createObjectURL(new Blob([svg], {type:'image/svg xml'}))

 .circular-loading{position:absolute;top:50%;left:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);padding:10px;background:#fafafa;width:50px;height:50px;border-radius:50%;}

 <img id="img" class="circular-loading">

И если вы не хотите вставлять новый <g> элемент, то вы также можете просто установить анимацию поворота на <circle> непосредственно (после исправления viewBox):

 const svg = `<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">
  <style>
    .path{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite,rotate 2s linear infinite;;stroke-linecap:round;transform-origin:center}
    @keyframes rotate{100%{transform: rotate(360deg);}}
    @keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px;}}
    @keyframes color{100%,0%{stroke:#db4235;}40%{stroke:#0057e7;}66%{stroke:#008744;}80%,90%{stroke:#ffa700;}}
  </style>
  <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
</svg>`;
img.src = URL.createObjectURL(new Blob([svg], {type:'image/svg xml'}))

 .circular-loading{position:absolute;top:50%;left:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);padding:10px;background:#fafafa;width:50px;height:50px;border-radius:50%;}

 <img id="img" class="circular-loading">

1. Поворот элемента <path> не работает. Пожалуйста, посмотрите на разницу, запустив свой фрагмент кода и фрагмент кода следующего ответа.

2. @GuilhermeRudnitzki извините, я пропустил завершение … исправлено

3. Это сработало как по волшебству! Спасибо @Kaiido! Ты мой герой svg.

4. На самом деле есть и другой способ без использования <g>

5. Обе формы кажутся эквивалентными, но последняя еще более элегантна. Хорошая работа!

Ответ №2:

Возможно, это ошибка новой версии Chrome. Вы должны сообщить об этом в Google. На данный момент, чтобы устранить вашу проблему, вы можете использовать svg-код в HTML и задать позицию для родительского div.

 .circular-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
  background: #fafafa;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

 <div class="circular-loading">
  <svg xmlns="http://www.w3.org/2000/svg" class="circular" viewBox="25 25 50 50" width="50px" height="50px" style="amp;#10;    /* position: absolute; */amp;#10;    /* top: 50%; */amp;#10;    /* left: 50%; */amp;#10;    /* box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),   0 1px 5px 0 rgba(0, 0, 0, 0.12); */amp;#10;    /* padding: 10px; */amp;#10;    /* background: #fafafa; */amp;#10;    /* width: 50px; */amp;#10;    /* height: 50px; */amp;#10;    /* border-radius: 50%; */amp;#10;"><style>.circular{animation:rotate 2s linear infinite;}.path{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round;}@keyframes rotate{100%{transform: rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px;}}@keyframes color{100%,0%{stroke:#db4235;}40%{stroke:#0057e7;}66%{stroke:#008744;}80%,90%{stroke:#ffa700;}}</style><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/></svg>
</div>