线性渐变网址无效

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.

Answer 1

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?

Answer 2

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