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

javascript model-view-controller canvas svg raphael
Ahmet Yildirim picture Ahmet Yildirim · Oct 13, 2011 · Viewed 9.1k times · Source

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.

Answer

Phrogz picture Phrogz · Oct 14, 2011

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.

Related questions

AngularJS Binding to WebGL / Canvas

I'm very green to AngularJS. I'm wondering if it's possible to use it when your view is using HTML5 Canvas or WebGL? If so, are there any good tutorials on how you go about this? I've seen several games boast …

Read More
Show pop-ups the most elegant way

I have this AngularJS app. Everything works just fine. Now I need to show different pop-ups when specific conditions become true, and I was wondering what would be the best way to proceed. Currently I’m evaluating two options, but …

Read More
In Angular, how to redirect with $location.path as $http.post success callback

I am attempting to make a simple authentication service by sending a Post to a php file, I need it to load the home page partial on my ng-view when its successful. This is what I tried : function loginCtrl($scope, $…

Read More