0

This is my SVG:

<svg viewBox="0 0 1226 340" id="back-rainbow" preserveAspectRatio="none">
   <defs>
      <linearGradient x1="100%" y1="0%" x2="0%" y2="15%" id="back-rainbow-gradient">
          <stop stop-color="#8DC6D8" offset="12%"/>
          <stop stop-color="#CE97DF" offset="40%"/>
          <stop stop-color="#FFCF9F" offset="90%"/>
      </linearGradient>
   </defs>
   <path d="M1074 0C673.94.2 303.56 126 0 340h1226V6c-50.1-3.72-100.95-5.8-152-6z"
        fill="url(#back-rainbow-gradient)" />
</svg>

It works in chrome but the prublem is in firefox. My SVG doesn`t have color in firefox !!

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
kamalon
  • 11
  • 4
  • If you view this snippet in Firefox, it works fine. You may need to provide more info. For instance, are you using this SVG inline in your page, or as an external SVG file? – Paul LeBeau Jan 05 '17 at 07:17
  • I use if inline in my HTML by It doesn`t work in my page!! I`m using angularjs. Why it works in this snippet but doesn`t work in my HTML page? – kamalon Jan 05 '17 at 08:28
  • Ah. You should have said you were using AngularJS. Does this help?: http://stackoverflow.com/questions/7759371/svg-gradient-turns-black-when-there-is-a-base-tag-in-html-page – Paul LeBeau Jan 05 '17 at 10:59

0 Answers0