Question

如何创建跨浏览器（Mozilla，Chrome，Safari），动画SVG甜甜圈？

目前我得到了这个：https://jsfiddle.net/odnmhvm6/1/

这似乎很好，正是我想要的（macOS，Chrome），但出现了一些问题:(按优先级排序）

它的超大r="3200"适合所有分辨率，如何使其响应？ - ＆GT;稍后我会在内圈添加内容（由viewBox属性解决）
不适用于手机（iPhone 6，Safari和Chrome）（使用固定值代替calc（）完成）
没有.circle > stroke-dashoffset > -50的CSS偏移，它开始落后

我对SVG不太满意，这是我到目前为止取得的最好成绩，也许我为了我的目的而犯了完全错误？

它应该是响应式的，总是填写整个屏幕并与常见的浏览器一起使用。 JS也可以，但是有必要达到它吗？

＆＃13;

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

svg {
  width: 100%;
  height: 100%;
}

.circle {
  stroke-dasharray: 20106.192982975;
  stroke-dashoffset: 20106.192982975;
  -webkit-animation: circle-in 3s ease-in-out forwards, fade-in 0.5s ease-out forwards;
}

@-webkit-keyframes circle-in {
  to {
    stroke-dashoffset: 0;
  }
}

＆＃13;

<div class="item">
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
       <g>
          <circle id="circle" class="circle" r="3200" cy="50%" cx="50%" stroke-width="6200" stroke="#000000" fill="none"/>
       </g>
    </svg>
</div>

＆＃13;

如何使用CSS创建响应式动画SVG甜甜圈？

0 个答案: