SVG Gradient turns black when there is a BASE tag in HTML page?

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)" ... />

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.

see also the following bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=652991

apparently, the notion of referencing (the fill gradient or marker-end, I suspect, too) by URL is problematic for AJAX-style applications that also use history.pushState().