Градиент svg css, проблема firefox

378

30 августа 2017, 15:25

Заливается svg градиентом прекрасно в chrome,в firefox не работает, пишет не найдено

fill: url(#GradientStatsOrange);

Код градиента:

<symbol id="Gradient_raiting_main_v3" width="100%" height="100%" viewBox="0 0 500 500" xmlns="w3.org/2000/svg"; preserveAspectRatio="none"> 
 <style type="text/css"> 
 rect{fill:url(#GradientBellBlue)}
 </style> 
 <defs> <linearGradient id="GradientBellBlue"> <stop offset="0%" stop-color="#53c2bf" /> <stop offset="100%" stop-color="#4ea2d3" /> </linearGradient> </defs>
 <rect width="100" height="50"/> 
 </symbol>

Answer 1

Вы не привели код градиента, поэтому подключаю свой градиент для оформления текста.

CSS

#txt1 {
fill:url(#Gradient-1);
}

HTML

<text id="txt1" x="15%" y="75%" font-size= "200px" font-weight= "bold"
  font-family= " 'Signika', sans-serif"  >Apple</text>

Ниже работающий во всех браузерах и даже в IE11 пример:

#txt1 { 
fill:url(#Gradient-1); 
}

<svg  width="750" height="300" version="1.1" 
viewBox="0 0 750 300"    xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" 
                    
    <defs> 
      <linearGradient id="Gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse"> 
        <stop offset="10%" stop-color="#48afc1" /> 
        <stop offset="10%" stop-color="#b4c63b" /> 
        <stop offset="20%" stop-color="#ef5b2b" /> 
        <stop offset="20%" stop-color="#503969" /> 
        <stop offset="30%" stop-color="#ab6294" /> 
        <stop offset="30%" stop-color="#1cb98f" /> 
        <stop offset="40%" stop-color="#48afc1" /> 
        <stop offset="40%" stop-color="#b4c63b" /> 
        <stop offset="50%" stop-color="#ef5b2b" /> 
        <stop offset="50%" stop-color="#503969" />   
        <stop offset="60%" stop-color="#ab6294" /> 
        <stop offset="60%" stop-color="#1cb98f" /> 
        <stop offset="70%" stop-color="#48afc1" /> 
        <stop offset="70%" stop-color="#b4c63b" /> 
        <stop offset="80%" stop-color="#ef5b2b" /> 
        <stop offset="80%" stop-color="#503969" /> 
        <stop offset="90%" stop-color="#ab6294" /> 
        <stop offset="90%" stop-color="#1cb98f" /> 
        <stop offset="100%" stop-color="#48afc1" /> 
      </linearGradient> 
    </defs> 
    <text id="txt1" x="15%" y="75%" font-size= "200px" font-weight= "bold" 
  font-family= " 'Signika', sans-serif"  >Stack</text> 
  </svg>

UPD

Добавлен пример от автора вопроса.

Вы немного запутались в тегах, заменил <symbol> на <svg> и всё заработало

<svg id="Gradient_raiting_main_v3" width="100%" height="100%" viewBox="0 0 500 500" xmlns="w3.org/2000/svg"; preserveAspectRatio="none">  
 <style type="text/css">  
 rect{ 
 fill:url(#GradientBellBlue) 
 } 
 </style>  
 <defs> <linearGradient id="GradientBellBlue"> <stop offset="0%" stop-color="#53c2bf" /> <stop offset="100%" stop-color="#4ea2d3" /> </linearGradient>  
 </defs> 
 <rect width="100" height="50"/>  
 </svg>