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

Question

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.

The correct answer is here ... http://stackoverflow.com/questions/19742805/angular-and-svg-filters — danday74, Jan 05 '16 at 17:11
if using Angular2, solution at http://stackoverflow.com/a/34535256/3218806 — maxbellec, Aug 01 '16 at 07:18
And for those using AngularJS instead: https://github.com/angular/angular.js/issues/8934#issuecomment-265037833 — Aurelio, Jun 13 '17 at 10:26

score 14 · Accepted Answer · answered Oct 14 '11 at 03:57

14

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.

answered Oct 14 '11 at 03:57

Phrogz

296,393
112
651
745

3

is there any solution to exclude svg from base tag – Max Abrahamsson Oct 14 '11 at 10:45
3

anyway im going to accept your answer but please let me know if you know a way to prevent this problem without removing base tag – Max Abrahamsson Oct 14 '11 at 11:12
@AhmetYıldırım You could try using a full URL to your page with the SVG tag, e.g. `fill="url(http://mydomain.com/foo/bar.html#gradient)"`. However, I would suggest fixing CodeIgniter to not require a `` tag. Why would you require this? – Phrogz Oct 14 '11 at 16:52
3

Using the full URL does not work, because it goes out and reads the file instead of using the (modified) document as currently constituted in the DOM. There really needs to be a way to disentangle SVG from the HTML `base` tag. – Dec 18 '11 at 03:53
2

If by chance you're using AngularJS, due to this issue they've added an option to eliminate the need for ``: https://github.com/angular/angular.js/issues/8934#issuecomment-56568466 – Bungle Jan 03 '15 at 18:45

score 4 · Answer 2 · answered Mar 17 '12 at 01:13

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().

score 0 · Answer 3 · answered Oct 13 '11 at 23:37

0

Your gradient definition is getting corrupted Also there are sometimes problems with Opera for certain usages of gradient filled objects

answered Oct 13 '11 at 23:37

Chasbeen

1,448
12
17

Please file bugs on Opera here: http://bugs.opera.com/wizard. And please include a testcase, or a link to one. Thanks :) – Erik Dahlström Oct 15 '11 at 14:55

score -2 · Answer 4 · answered Feb 24 '16 at 22:43

I had a similar issue - gradient is rendered all black in Chrome, but I didn't even have a <base> tag.

Changing

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

to

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

seemed to fix the issue.

Another unrelated bug was Chrome being unable to parse transform="translate(...)" on <g> elements, I had to move them into individual <path>-s.

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

4 Answers4

Linked