<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 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().
Your gradient definition is getting corrupted Also there are sometimes problems with Opera for certain usages of gradient filled objects
I had a similar issue - gradient is rendered all black in Chrome, but I didn't even have a
<stop offset="1" style="stop-color:#F26722"/>
<stop offset="1" stop-color="#F26722"/>
seemed to fix the issue.
Another unrelated bug was Chrome being unable to parse
<g> elements, I had to move them into individual
©2020 All rights reserved.