SVG渐变在HTML页面中存在BASE标签时变黑？

Question

我正在使用 Raphaël JavaScript 库在 HTML 页面中创建 SVG 元素，并使用 CodeIgniter 作为 PHP 框架。在 CodeIgniter 框架中，我需要在 HTML 文档的 head 中添加 <base> 标签来使用 JS、CSS 和图片，但这会导致 SVG 元素出现奇怪的问题。

当我使用 <base> 标签时，渐变效果无法正常工作，而是将对象变为黑色。填充图像的路径对象也表现出相同的问题。

- Max Abrahamsson

---

正确答案在这里...https://dev59.com/cmIj5IYBdhLWcg3w8JRZ - danday74

使用Angular2的解决方案，请参见 https://dev59.com/xlsW5IYBdhLWcg3w2aGK#34535256。 - maxbellec

对于那些使用AngularJS的人：https://github.com/angular/angular.js/issues/8934#issuecomment-265037833 - Aurelio

Answer 1

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

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

如果您使用带有`href`属性的<base>元素，您将改变文档中此类URL的含义。这些URL不再相对于当前文档进行计算，而是相对于指定的单独URI进行计算。

- Phrogz

---

有没有办法从基础标签（<base>标签）中排除SVG？ - Max Abrahamsson

无论如何，我将接受您的答案，但请让我知道是否有一种方法可以在不删除基本标签的情况下防止此问题。 - Max Abrahamsson

@AhmetYıldırım 你可以尝试使用SVG标签的完整URL链接到你的页面，例如 fill="url(http://mydomain.com/foo/bar.html#gradient)"。然而，我建议修复CodeIgniter，不需要 <base> 标签。为什么你需要这个呢？ - Phrogz

完整的URL无法正常工作，因为它会读取文件而不是使用DOM中当前组成的（修改后的）文档。确实需要一种方法来将SVG与HTML的“base”标签分离开来。 - user663031

如果你正在使用AngularJS，由于这个问题，他们已经添加了一个选项来消除<base>的需要：https://github.com/angular/angular.js/issues/8934#issuecomment-56568466 - Bungle

Answer 2

请参阅以下错误报告： https://bugzilla.mozilla.org/show_bug.cgi?id=652991 显然，使用URL引用（我猜测还包括渐变填充或标记）在同时使用history.pushState()的AJAX样式应用程序中存在问题。

- Erik Eidt

Answer 3

你的渐变定义出现了问题，可能已经损坏了。 此外，在使用填充渐变对象时，Opera 有时会出现问题。

- Chasbeen

---

请在此处报告Opera的错误：http://bugs.opera.com/wizard。并请包含一个测试用例或链接。谢谢 :) - Erik Dahlström

Answer 4

我有一个类似的问题 - 渐变在Chrome中被渲染成全黑色，但我甚至没有使用<base>标签。

更改

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

到

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

问题似乎已经解决。

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

- Nikita