Не работает SVG в браузере FF

485

24 июня 2017, 10:25

Всем привет!

Не работает SVG код в браузере Firefox

$max: 100px; 
 
.equilizer { 
  height: $max; 
  width: $max; 
  transform: rotate(180deg); 
} 
 
.bar { 
  fill: DeepPink; 
  width: 18px; 
  animation: equalize 1.25s steps(25, end) 0s infinite; 
} 
 
.bar:nth-child(1) {  
  animation-duration: 1.9s; 
} 
 
.bar:nth-child(2) {  
  animation-duration: 2s; 
} 
 
.bar:nth-child(3) {  
  animation-duration: 2.3s; 
} 
 
.bar:nth-child(4) {  
  animation-duration: 2.4s; 
} 
 
.bar:nth-child(5) {  
  animation-duration: 2.1s; 
} 
 
@keyframes equalize { 
  0% { 
    height: 60px; 
  } 
  4% { 
    height: 50px; 
  } 
  8% { 
    height: 40px; 
  } 
  12% { 
    height: 30px; 
  } 
  16% { 
    height: 20px; 
  } 
  20% { 
    height: 30px; 
  } 
  24% { 
    height: 40px; 
  } 
  28% { 
    height: 10px; 
  } 
  32% { 
    height: 40px; 
  } 
  36% { 
    height: 60px; 
  } 
  40% { 
    height: 20px; 
  } 
  44% { 
    height: 40px; 
  } 
  48% { 
    height: 70px; 
  } 
  52% { 
    height: 30px; 
  } 
  56% { 
    height: 10px; 
  } 
  60% { 
    height: 30px; 
  } 
  64% { 
    height: 50px; 
  } 
  68% { 
    height: 60px; 
  } 
  72% { 
    height: 70px; 
  } 
  76% { 
    height: 80px; 
  } 
  80% { 
    height: 70px; 
  } 
  84% { 
    height: 60px; 
  } 
  88% { 
    height: 50px; 
  } 
  92% { 
    height: 60px; 
  } 
  96% { 
    height: 70px; 
  } 
  100% { 
    height: 80px; 
  } 
}

<svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128"> 
  <g> 
    <title>Audio Equilizer</title> 
    <rect class="bar" transform="translate(0,0)" y="15"></rect> 
    <rect class="bar" transform="translate(25,0)" y="15"></rect> 
    <rect class="bar" transform="translate(50,0)" y="15"></rect> 
    <rect class="bar" transform="translate(75,0)" y="15"></rect> 
    <rect class="bar" transform="translate(100,0)" y="15"></rect> 
  </g> 
</svg>

ссылка на codepen

В других браузерах все работает отлично, в чем проблема? Спасибо за помощь!

Answer 1

Проблема в том, что в данном случае width и height элемента rectangle должны быть указаны как атрибуты элемента rectangle, а не свойства атрибута style. Firefox пытается найти именно атрибуты элемента rectangle, но не находит. Имеется в виду, width и height следует задавать так:

<rect width="18" height="10">

Но тогда будут проблемы с анимацией, потому что анимация у Вас тоже прописана через css. Могу предложить вот такой вариант решения, когда все свойства и анимация осуществляются через svg:

<rect width="18" height="10" x="75" y="15" fill="#ff1493"> <animate attributeName="height" dur="1.2s" fill="freeze" values="10; 100; 30; 50; 40; 30; 10" repeatCount="indefinite" /> </rect>

Анимацию можно настроить в атрибутах: dur - длительность анимации values - это все значения, через которые будет проходить столбец (их можно сделать больше/меньше, как нравится)