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.

Installation

$ bower install angular-svg-base

Usage

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) {
    $locationProvider.html5Mode(true);
  });

Testing

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.

$ ./e2etest.sh