Question

我正在尝试使用this代码实现此SVG循环进度条。

但它不适用于Chrome以外的浏览器。谁能告诉我问题是什么？

代码如下：

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="200px" height="200px" viewBox="-5 0 210 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" class="circle base"></path>
    <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" class="circle progress" style="-webkit-animation-duration: 5s;"></path>
</svg>

CSS

 body {
   margin: 0;
   height: 100%;
   }

 svg {
    display: table;
    height: 100%;
    width: 50%;
    margin-left: 25%;
     }

 path.circle {
   display: table-cell;
   fill: none;
   stroke: #DEDEDE;
   stroke-width: 10;
   stroke-dasharray: 629;
   vertical-align: middle;
   -webkit-transform-origin: center center;
   }

  path.progress {
    stroke: #0094CC;
   -webkit-animation: progress 20s linear;
   -webkit-transform: rotate(-90deg) scale(1, -1);
   }

  path.base {
   /* -webkit-animation: base 20s linear; */
    -webkit-transform: rotate(-90deg);
   }

   @-webkit-keyframes progress {
     from { stroke-dashoffset: 629; }
     to { stroke-dashoffset: 0; }
    }

   @-webkit-keyframes base {
         from { stroke-dashoffset: 0; }
         to { stroke-dashoffset: 629; }
     }

我的问题是，如果我添加-moz-，-o-的属性，它仍然无法在Firefox或Opera中使用。可能是什么问题。虽然相同的代码可以在Chrome中运行。但是我可能会错过Firefox或opera.I替换值-webkit- with -moz - ， - o-仍然不起作用。

Answer 1

我认为在使用css动画时，请尝试将其调整为所有浏览器：

-webkit-animation: progress 20s linear;
-moz-animation:    progress 20s linear;
 -o-animation:     progress 20s linear;
 animation:        progress 20s linear;

为所有拥有-webkit-后缀的css动画做同样的事情，对于变换也是如此，希望这个帮助

SVG循环进度无效在Mozilla，Opera

1 个答案: