javascript - SVG 动画不适用于 mozilla，但适用于 chrome 和 safari

Question

标题说明了一切。

我不知道该怎么办了。在我的电脑上，它甚至会在我打开 URL 时甚至在本地打开文件时阻止我的电脑。这是一个沉重的动画，但我仍然认为 mozilla 应该打开它。
我尝试在 stroke-width 属性上使用“px”，但仍然没有用。
任何想法？

>website url here<

		var all = document.querySelectorAll('.circle');

		for (var i = 0; i < all.length; i++) {
		  var c = all[i].getAttribute("data-color");
		  var s = parseInt(all[i].getAttribute("data-step"));
		  var b = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '"  stroke-width="0.03" /></svg>\')';
		  var end = 180 / s;
		  for (var j = 1; j < end; j++) {
			b += ',url(\'data:image/svg+xml,<svg style="transform:rotate(' + s * j + 'deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '"  stroke-width="0.03" /></svg>\')';
		  }
		  all[i].style.setProperty("--b", b);
		  all[i].querySelector('span').style.setProperty("background", c);}

$(document).ready(function(){
$("span").css("background-color","white");
$( document ).trigger( "click" );
});

<style>
.food{
color:#0073b3!important;
}
.food:hover{
background-color:#0073b3!important;
color:white!important;
    transition: all .5s;
}

.line{
color:#FBAF17!important;
background-color:#white!important;
}
.line:hover{
background-color:#FBAF17!important;
color:white!important;
    transition: all .5s;
	
}

.music{
color:#F15E42!important;
background-color:#white!important;
}
.music:hover{
background-color:#F15E42 !important;
color:white!important;
    transition: all .5s;
	
}
.air{
color:#ED1C24!important;
background-color:#white!important;
}
.air:hover{
background-color:#ED1C24 !important;
color:white!important;
    transition: all .5s;
	
}
.story{
color:#3EA472!important;
background-color:#white!important;
}
.story:hover{
background-color:#3EA472 !important;
color:white!important;
    transition: all .5s;
	
}

@font-face {
  font-family: 'MyWebFont';
  src: url('FranklinGothicLT-BookCnd.eot'); /* IE9 Compat Modes */
  src: url('FranklinGothicLT-BookCnd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('FranklinGothicLT-BookCnd.woff2') format('woff2'), /* Super Modern Browsers */
       url('FranklinGothicLT-BookCnd.woff') format('woff'), /* Pretty Modern Browsers */
       url('FranklinGothicLT-BookCnd.ttf')  format('truetype') /* Safari, Android, iOS */

}

html, body, span, p {
font-family:'MyWebFont'
};

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: right;
}
.footer a{
float:right;
}
body {
  overflow: hidden;
}


.circle {
  height: 100px;
  width: 100px;
  position:absolute;
}

.circle-food span{
  width:220px!important;
  height:220px!important;
  display:block;
  margin:0px auto;
  position:absolute;
  left:-60%;top:-60%;

  }
.circle-story span{
  width:350px!important;
  height:350px!important;
  display:block;
  margin:0px auto;
  position:absolute;
  left:-126%;top:-126%;
}
.circle-line span{


  width:300px!important;
  height:300px!important;
  display:block;
  margin:0px auto;
  position:absolute;
  left:-105px;top:-105px;

}

.circle-air span{
	width:125px!important;
	height:125px!important;
	top: -15px;
	position: absolute;
	left: -15px;
}

.circle-music span{
	width:225px!important;
	height:225px!important;
	top: -65px;
	position: absolute;
	left: -65px;
}

.circle span {
  text-align:center;
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3;
  border-radius: 50%;
  color:#fff;
}

.circle:after {
  content: "";
  z-index: -1;
  position: absolute;
  top: -5000%;
  left: -5000%;
  right: -5000%;
  bottom: -5000%;
  background-image: var(--b);
  background-size: 100% 100%;
  animation: animate 90s infinite linear;
  opacity: 0.8;
}

@keyframes animate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
 {margin:0;
background-color:#FFFCE4;
}

.navbar {
  overflow: hidden;
  background-color: transparent;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar .wrapp {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-right:100px;
}


.navbar .wrapp a{

  text-decoration: none;
  color:black;
  margin-left:10px;
  font-size:20px;
  font-weight:700;
}

.navbarb {
  overflow: hidden;
  background-color: transparent;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbarb .wrapp {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-right:100px;
}


.navbarb .wrapp a{

  text-decoration: none;
  color:black;
  margin-left:10px;
  font-size:20px;
  font-weight:700;
}

.footer {
   padding: 20px;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: white;
   color: black;
   text-align: center;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="navbar">
<div class="wrapp" style="float:left !important;margin-left:50px;" > 
  <a href="#home"><img style="height:20px;width:auto;" src="assets/images/png-03.png"></a>
 </div>
 <div class="wrapp"> 
 
  <a href="mailto: info@boyoomfestival.com" target="_top">CONTACT</a>
  
 </div>

</div>

<div class="circle circle-food" style="left:30%;top:25%;" data-color="#0073B3" data-step="5">
<span class="food" style="font-size:35px;line-height:40px;">FOOD&<br>DRINKS</span>
</div>
<div class="circle circle-line" style="left:20%;bottom:25%;" data-color="#FBAF17" data-step="5">
<span class="line" style="font-size:50px;">LINE-UP<br>2018</span>
</div>

<div class="circle circle-music" style="right:15%;top:20%;" data-color="#F15E42" data-step="5">
<span class="music" style="font-size:45px;line-height:45px;">THE<br>MUSIC</span>
</div>

<div class="circle circle-air" style="right:15%;bottom:15%;" data-color="#ED1C24" data-step="5">
<span class="air" style="font-size:30px;">ON<br>AIR!</span>
</div>

<div class="circle circle-story" style="right:40%;bottom:40%" data-color="#3EA472" data-step="5">
<span class="story" style="font-size:50px;">FESTIVAL STORY</span>
</div>

<div class="navbarb">

 <div class="wrapp" style="margin-right:100px!important;"> 
 
  <a href="#news" ><img style="height:20px;width:auto;" src="assets/images/png-01.png"></a>
  <a href="https://www.youtube.com/channel/UCP26dpdpnbFMsGdCK2QIjWw" style="margin-left:25px;"><img style="height:20px;width:auto;" src="assets/images/png-02.png"></a>
   <a href="https://www.thingsbydylan.com/"style="margin-left:25px;"><img style="height:20px;width:auto;" src="assets/images/png-04.png"></a>
 </div>

</div>

代码片段现已可用，转到整页以清楚地看到它。

Answer 1

我一直在清理您的代码，删除所有数据 URL。相反，SVG 内容被定位为内联并动态附加。尺寸的设置总是覆盖整个屏幕，但不需要很大的屏幕外区域。颜色定义已移至 CSS，data-step 属性仍然存在。在我安装的 Firefox 上，动画远非流畅，但它运行并使用不超过 50MB。

window.onload = function () {
  document.querySelectorAll('.circle').forEach(function (circle, i) {
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', "0 0 200 200");
    svg.setAttribute('preserveAspectRatio', "xMidYMid slice");

    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.id = 'line' + i;
    line.setAttribute('x1', "100");
    line.setAttribute('x2', "100");
    line.setAttribute('y1', "-300");
    line.setAttribute('y2', "300");
    svg.append(line);

    var s = parseInt(circle.getAttribute("data-step"));
    var end = 180 / s;
    for (var j = 1; j < end; j++) {
      var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
      use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#line' + i);
      use.setAttribute('transform', 'rotate(' + s * j + ', 100, 100)');
      svg.append(use);
    }
    circle.append(svg);
  });
}

body {
    overflow: hidden;
}

.circle {
  height: 100px;
  width: 100px;
  position:absolute;
}

.circle span {
  text-align:center;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3;
  border-radius: 50%;
  background-color:white;
  margin:0px auto;
  position:absolute;
}
.circle span:hover {
    color:white;
    transition: all .5s;
}
.food{
    color:#0073b3;
}
.food:hover{
    background-color:#0073b3;
}

.line{
    color:#FBAF17;
}
.line:hover{
    background-color:#FBAF17;
}

.music{
    color:#F15E42;
}
.music:hover{
    background-color:#F15E42;
}
.air{
    color:#ED1C24;
}
.air:hover{
    background-color:#ED1C24;
}
.story{
    color:#3EA472;
}
.story:hover{
    background-color:#3EA472;
}

.circle-food span{
  width:220px;
  height:220px;
  left:-60%;
  top:-60%;
}
.circle-story span{
  width:350px;
  height:350px;
  left:-126%;
  top:-126%;
}
.circle-line span{
  width:300px;
  height:300px;
  left:-105px;
  top:-105px;
}

.circle-air span{
	width:125px;
	height:125px;
	top: -15px;
	left: -15px;
}

.circle-music span{
	width:225px;
	height:225px;
	top: -65px;
	left: -65px;
}

svg {
    opacity: 0.8;
    position: absolute;
    z-index: -1;
    left:calc(50% - 100vw);
    top:calc(50% - 100vh);
    width: 200vw;
    height: 200vh;
    animation: animate 90s infinite linear;
    transform-origin: center;
}
.circle-food svg {
    stroke: #0073B3;
}
.circle-line svg {
    stroke: #FBAF17;
}
.circle-music svg {
    stroke: #F15E42;
}
.circle-air svg {
    stroke: #ED1C24;
}
.circle-story svg {
    stroke: #3EA472;
}

line {
    stroke-width: 0.05;
}

@keyframes animate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="circle circle-food" style="left:30%;top:25%;" data-step="5">
<span class="food" style="font-size:35px;line-height:40px;">FOOD&<br>DRINKS</span>
</div>
<div class="circle circle-line" style="left:20%;bottom:25%;" data-step="5">
<span class="line" style="font-size:50px;">LINE-UP<br>2018</span>
</div>

<div class="circle circle-music" style="right:15%;top:20%;" data-step="5">
<span class="music" style="font-size:45px;line-height:45px;">THE<br>MUSIC</span>
</div>

<div class="circle circle-air" style="right:15%;bottom:15%;" data-step="5">
<span class="air" style="font-size:30px;">ON<br>AIR!</span>
</div>

<div class="circle circle-story" style="right:40%;bottom:40%" data-step="5">
<span class="story" style="font-size:50px;">FESTIVAL STORY</span>
</div>