当HTML页面中有BASE标记时,SVG Gradient变黑？

Question

我使用RaphaëlJavaScript库在HTML页面中创建SVG元素,并使用CodeIgniter作为PHP框架.在CodeIgniter框架中,我需要<base>在HTML文档的头部添加一个标签来使用JS,CSS和图像,但它在SVG元素中引起了一个奇怪的问题.

当我使用<base>标签时,渐变不起作用.相反,该对象变黑.它与图像填充的路径对象的行为完全相同.

这里有一个示例渐变脚本.

Answer 1

SVG Gradients在文档中定义,具有唯一id属性,然后从另一个元素作为URL引用.通常,URL只是标识符片段,例如:

<defs>
  <linearGradient id="foo" ...>...</linearGradient>
</defs>
<rect fill="url(#foo)" ... />

如果引入<base>具有href属性的元素,则可以更改文档中此类URL的含义.它们不是相对于当前文档计算的,而是相对于指定的单独URI计算的.