如何解决 Chrome 73 上 SVG 旋转 CSS 中的错误？

Question

我使用模仿 Google 加载动画图标的 SVG 图像：

安装 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 版本的 bug。你应该向谷歌报告。现在，要解决您的问题，您可以在 HTML 中使用 svg 代码，并为父 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>