URL to linear gradient doesn't work

Question

I have the following nested html elements :

<div class="trend-line-chart">
   <div class="title"></div>
   <div class="chart">
      <div class="">
         <svg width="200" height="100">
            <g>
               <g>
                  <g>
                     <path></path>
                     <path></path>
                     <path></path>
                     <g>
                        <defs>
                           <lineargradient id="LineChartGradient" gradientTransform="rotate(90)">
                              <stop offset="10%" stop-color="#D6EBF3"></stop>
                              <stop offset="10%" stop-color="#D6EBF3"></stop>
                           </lineargradient>
                        </defs>
                        <polygon points="...." stroke="#8AB9E1" stroke-width="0" fill="url(/dashboard/renderer#LineChartGradient)" fill-opacity="0.5"></polygon>
                     </g>
                  </g>
               </g>
            </g>
         </svg>
      </div>
   </div>
</div>

This component is within a larger html file with lots of other components.

At first the fill gradient didn't work until I added /dashboard/renderer to its URL path (which you can see in the code above) . Now , once again it's not working. As we are developing a dashboard , we move pages to different paths. And I'm sure the reason of not showing up is the the url. Any idea on how to refer to the fill gradient locally ? So regardless of the path it always works.

score 4 · Answer 1 · answered Apr 20 '15 at 01:11

4

Does you HTML header have a <base> element? If so, it will interfere with how the browser interprets gradient URLs.

If you need to keep the <base> element, then the solution is to use an absolute URL (as you seem to have discovered).

fill="url(/path/to/my/HTML/file#LineChartGradient)"

You say it has stopped working. Has the URL of your page changed recently?

answered Apr 20 '15 at 01:11

Paul LeBeau

97,474
9
154
181

Yes it changed right after changing the url and we don't have a base element in our page. – Arian Apr 20 '15 at 01:41
Actually we are developing components which can be used anywhere ! – Arian Apr 20 '15 at 02:54
THANK YOU VERY MYCH! base tag was my problem – mqklin Jan 31 '17 at 13:07

score 0 · Answer 2 · edited May 23 '17 at 10:29

SVG Gradients are defined in the document with a unique id attribute, and then referenced from another element as a URL. Currently, our AngularJS code uses html base tag which stop the SVG Gradient from working. The reason is that the url is not relative to the current document anymore but they are computed relative to the specified separate URI.

It looks like that there's a fix for this bug in AngularJS : https://github.com/angular/angular.js/issues/8934#issuecomment-56568466

References:

[1] SVG Gradient turns black when there is a BASE tag in HTML page?

[2] Angular and SVG filters

URL to linear gradient doesn't work

2 Answers2