Giter VIP home page Giter VIP logo

angular-svg-base's Introduction

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

angular-svg-base's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

angular-svg-base's Issues

Main JS file missing?

Maybe I missed a step, but seems like the bower install command is missing the main JS file. I get a consistent 404 on angular-svg-base/angular-svg-base.js after bower install.

Why doesn't this module support <use xlink:href="#path"></use> syntax?

I see in the description that this module purposefully handles only FuncIRI notation. Why is that?
The following syntax is quite popular:

<svg>
    <use xlink:href="#path"></use>
</svg>

And it too suffers from the firefox/<base> bug.

Basically I had to implement my own directive which does exactly the same thing as your module, but for xlink:href attribute. Are there some valid reasons for not supporting it?

Special Characters Support within Urls

I noticed that this fails to support urls that have quotes within it (i.e. in order to escape special characters).

An example url("http://example.com/test?item=Horrible (but valid) Item") will not work.

A possible way to capture this use case would be to add quote strings in the computeSVGAttrValue return if it doesn't already contain them (which is what I am doing to make it work).

Edit (Just in case, code that I added):

value('svgAttrExpressions', {
FUNC_URI: /^url\((.*)\)$/,
SVG_ELEMENT: /SVG[a-zA-Z]*Element/,
HASH_PART: /#.*/,
QUOTES: /["']/
})

...

var isValidUrlString = angular.isString(fullUrl);
var hasPreQuote = isValidUrlString && svgAttrExpressions.QUOTES.test(fullUrl.charAt(0));
var hasPostQuote = isValidUrlString && svgAttrExpressions.QUOTES.test(fullUrl.charAt(fullUrl.length - 1));
return fullUrl ? 'url(' + (hasPreQuote ? '' : '\"') + fullUrl + (hasPostQuote ? '' : '\"') + ')' : null;

Angular 2?

Is there an Angular 2 version of this package out there or being planned? Or is there something in Angular 2 that I missed that addresses this problem?

update package on npm

There is a package by this name on npm, and its npm page claims to be from this github repository. But it also claims to be version 0.0.5, which is weird, since that's not a version that appears in this repo. Worse, the version there fails 6 of its 9 unit tests, and as such I found it to be non-functional.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.