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

Question

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

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

示例渐变脚本是here。

Answer 1

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

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

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

Answer 2

另见以下错误报告： https://bugzilla.mozilla.org/show_bug.cgi?id=652991

显然，对于同样使用history.pushState（）的AJAX风格的应用程序来说，通过URL引用（填充渐变或标记结束）的概念也存在问题。

Answer 3

您的渐变定义已损坏 对于渐变填充对象的某些用法，Opera有时会出现问题

Answer 4

我有一个类似的问题 - 渐变在Chrome中呈现为全黑色，但我甚至没有<base>标记。

更改

<stop  offset="1" style="stop-color:#F26722"/>

到

<stop  offset="1" stop-color="#F26722"/>

似乎解决了这个问题。

另一个不相关的错误是Chrome无法解析transform="translate(...)"元素上的<g>，我不得不将它们移到单独的<path> - s。