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

Posted 2023-02-22

【中文标题】HTML页面中有BASE标签时SVG渐变变黑？

【英文标题】：SVG Gradient turns black when there is a BASE tag in HTML page?

【发布时间】：2011-12-07 05:53:20

【问题描述】：

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

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

【问题讨论】：

正确答案在这里...***.com/questions/19742805/angular-and-svg-filters

如果使用 Angular2，解决方案在***.com/a/34535256/3218806

对于那些使用 AngularJS 的人：github.com/angular/angular.js/issues/…

【参考方案1】：

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

变化

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

到

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

似乎解决了这个问题。

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

【参考方案2】：

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

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

【参考方案3】：

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

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

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

【讨论】：

有什么解决方案可以从基本标签中排除 svg

无论如何我都会接受你的回答，但如果你知道在不删除基本标签的情况下防止这个问题的方法，请告诉我

@AhmetYıldırım 您可以尝试使用带有 SVG 标记的页面的完整 URL，例如fill="url(http://mydomain.com/foo/bar.html#gradient)"。但是，我建议将 CodeIgniter 修复为不需要 <base> 标签。为什么需要这个？

使用完整的 URL 不起作用，因为它会出去并读取文件，而不是使用当前在 DOM 中构成的（修改的）文档。确实需要一种方法来将 SVG 从 HTML base 标签中分离出来。

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

【参考方案4】：

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

【讨论】：

请在此处提交有关 Opera 的错误：bugs.opera.com/wizard。并请包括一个测试用例，或一个链接。谢谢:)