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

Question

Я использую изображение 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 вращение по-прежнему работает нормально.

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

Answer 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">

Answer 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="&#10;    /* position: absolute; */&#10;    /* top: 50%; */&#10;    /* left: 50%; */&#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); */&#10;    /* padding: 10px; */&#10;    /* background: #fafafa; */&#10;    /* width: 50px; */&#10;    /* height: 50px; */&#10;    /* border-radius: 50%; */&#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>