Auto directives to automatically rewrite absolute hash URLs for fragment references in SVG elements, to work around <base> side effects in Gecko and Blink.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
LICENSE
README.md
bower.json
e2etest.sh
karma.conf.js
package.json
protractor.conf.js

README.md

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