Auto directives to automatically rewrite absolute hash URLs for fragment references in SVG elements, to work around <base> side effects in Gecko and Blink.

angularjs, svg, base
bower install angular-svg-base



Note: If you open an issue or PR here, please tweet me at jeffbcross so I will notice it.

This is a set of auto directives to fix SVG attributes that reference fragments within the same document via FuncIRI notation (mask="url(#someFragment)") where a base tag is present. Blink and gecko incorrectly apply these references to the base href.

The attributes that will be automatically rewritten include:

  • clip-path
  • color-profile
  • src
  • cursor
  • fill
  • filter
  • marker
  • marker-start
  • marker-mid
  • marker-end
  • mask
  • stroke

The attributes will only be rewritten if the value matches FuncIRI notation (i.e. mask="url(#aMask)") and the url contains a hash.

See AngularJS issue #8934.


$ bower install angular-svg-base


Just add the module as a dependency and it rewrites all #fragment urls to be absolute urls relative to the current document, regardless of base.

(Note: directives only apply in html5 mode, as everything works as expected otherwise).

angular.module('myApp', ['ngSVGAttributes']).
  config(function($locationProvider) {


Unit Tests:

$ npm install .
$ ./node_modules/.bin/karma start

E2E (from project root directory):

Installs npm and webdriver dependencies, then starts server and runs e2e tests.

$ ./