Question

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")

Answer 1

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;
    }
  }