当 HTML 页面中有 BASE 标签时，SVG Gradient 会变黑? [英] SVG Gradient turns black when there is a BASE tag in HTML page?

问题描述

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

I am using the Raphaël JavaScript Library to create SVG elements in an HTML page and using CodeIgniter as a PHP framework. In the CodeIgniter framework I need to add a <base> tag in the head of the HTML document to use JS,CSS and images, but it caused a strange problem in the SVG element.

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

When I use the <base> tag, gradients do not work. Instead, the object turns black. It behaves exactly the same with image filled path objects.

推荐答案

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

SVG Gradients are defined in the document with a unique id attribute, and then referenced from another element as a URL. Typically the URL is just the identifier fragment, e.g.:

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

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

If you introduce a <base> element with an href attribute, you change the meaning of such URLs in the document. Instead of being computed relative to the current document, they are computed relative to the specified separate URI.

这篇关于当 HTML 页面中有 BASE 标签时，SVG Gradient 会变黑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！