当 HTML 页面中有 BASE 标签时，SVG 渐变会变黑？

Question

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

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

Answer 1

SVG 渐变 在文档中使用唯一的 id< 进行定义/code> 属性，然后从另一个元素作为 URL 引用。通常，URL 只是标识符片段，例如：

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

如果引入带有 href 属性的 元素，则会更改文档中此类 URL 的含义。它们不是相对于当前文档进行计算，而是相对于指定的单独 URI 进行计算。

Answer 2

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

显然，通过 URL 引用（我怀疑也是填充渐变或标记结束）的概念对于也使用 History.pushState() 的 AJAX 样式应用程序来说是有问题的。

Answer 3

你的梯度定义正在被破坏
Opera 对于渐变填充对象的某些用法有时也会出现问题

Answer 4

我遇到了类似的问题 - 渐变在 Chrome 中呈现为全黑，但我什至没有 标签。

更改

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

为

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

似乎可以解决问题。

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