时间戳

首页 > 解决方案 > SVG 动画在 Firefox 和 Safari 上不起作用

html - SVG 动画在 Firefox 和 Safari 上不起作用

问题描述

像动画一样制作圆形饼图。在 Chrome 上完美运行，但在 Firefox 上没有动画，而在 safari 上根本不显示。

你知道问题是什么吗？

https://codepen.io/jamalfaiez/pen/zYwVKPq

<div class="circle_anim rndm_01 rndm_rotate_03">
    <svg version="1.1" viewBox="0 0 285 284">
      <g class="circles">
        <circle cx="142" cy="142" r="142"></circle>
        <circle cx="142" cy="142" r="137"></circle>
        <circle cx="142" cy="142" r="137"></circle>
        <circle cx="142" cy="142" r="137"></circle>
        <circle cx="142" cy="142" r="137"></circle>
        <circle cx="142" cy="142" r="137"></circle>
        <circle cx="142" cy="142" r="137"></circle>
      </g>
    </svg>
  </div>

标签： htmlcssanimationsvgcss-animations

解决方案

删除display: flexfrom.circle_anim为我恢复了大部分可视化。

.circle_anim {
  position: relative;
  width: 285px;

  /* display: flex; */

  justify-content: center;
  align-items: center;
}

推荐阅读