jeffbcross / angular-svg-base Goto Github PK

Hey Jeff,

Wondering if this module works with the SVG animations that output in JSON format from the bodymovin plugin below?

I can't seem to get your module to work with these yet but figured I'd ask and see if you have any thoughts?

Thanks!

https://github.com/bodymovin/bodymovin

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?

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.

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?

Noticed the URL isn't being rewritten in IE.

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.

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;