Question

我有以下嵌套的html元素：

<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>

此组件位于包含许多其他组件的较大html文件中。

首先，填充渐变不起作用，直到我将/dashboard/renderer添加到其URL路径（您可以在上面的代码中看到）。现在，它又一次没有用。在我们开发仪表板时，我们将页面移动到不同的路径。而且我确定没有出现的原因是url。有关如何在本地引用填充渐变的任何想法？因此，不管路径如何，它始终有效。

Answer 1

HTML标头是否有<base>元素？如果是这样，它将干扰浏览器如何解释渐变URL。

如果您需要保留<base>元素，那么解决方案是使用绝对URL（您似乎已发现）。

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

你说它已经停止工作了。您最近是否更改了网页的网址？

Answer 2

SVG Gradients在文档中定义，具有唯一的id属性，然后从另一个元素作为URL引用。目前，我们的AngularJS代码使用html base标记来阻止SVG Gradient工作。原因是url不再与当前文档相关，而是相对于指定的单独URI计算。

看起来AngularJS中存在修复此错误的问题：https://github.com/angular/angular.js/issues/8934#issuecomment-56568466

参考文献：

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

[2] Angular and SVG filters

线性渐变的URL不起作用

2 个答案: