Following hyperlink in svg throws exception.

[bsr203]

I have posted a query in SO, and hopefully the fix as suggested would help to use svg elements within angular applications.

It has nothing to do with d3, as I made a fiddle with just an svg element to reproduce the issue.
http://jsfiddle.net/DEvDe/1/

http://stackoverflow.com/questions/12588913/svganimatedstring-missing-method-indexof

I am using d3.js together with angularjs. When use hyperlink in svg object(which rendered through angular directive), I am getting this error.

As per the doc here, svgAnimatedString doesn't have any specific method. How can I solve this. Can I inject a method or any other way.

Part of the code below. Thanks you.

svg.selectAll("a.node")
.data(data)
.enter().append("a")
.attr("class", "node")
.attr("xlink:href", "test")
.append("rect")

Proposed solution:
Various libraries have encountered this problem (i.e here). In SVG, when you try to get the href attribute of an anchor it returns an SVGAnimatedString. You get the actual string by using SVGAnimatedString.baseVal. I don't know how you can do this without patching Angular, but this will give you an idea of what is needed:

this.$$rewriteAppUrl = function(absoluteLinkUrl) {
if (absoluteLinkUrl.baseVal != null) {
absoluteLinkUrl = absoluteLinkUrl.baseVal;
}
if(absoluteLinkUrl.indexOf(appBaseUrl) == 0) {
return absoluteLinkUrl;
}
}

[Qwlouse]

I've encountered the same problem while using D3 with angular.

[Crashthatch]

+1

[just-boris]

+1, please approve the pull request above, it makes a deal

[nikek]

+1, would be awesome!

[IgorMinar]

closing in favor of #5198