SvgAnimatedString缺少indexOf方法

Question

我正在使用d3.js和angularjs。当我在svg对象中使用超链接（通过angular指令渲染）时，我遇到了这个错误。

按照文档所述，svgAnimatedString没有任何特定的方法。我该怎么解决？我能注入一个方法或者其他方法吗？

下面是代码的一部分。谢谢。

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

- bsr

---

看起来你正在传递一个DOM元素，而函数期望其它类型的参数。为了得到答案，你需要提供更多的代码 - 你是如何应用Angular函数的？ - nrabinowitz

@nrabinowitz 谢谢。我会提供更多细节。虽然我没有直接调用angular，但当我点击svg链接时，它会尝试解析url。再次感谢，我会回到你那里的。 - bsr

@nrabinowitz 请查看这个fiddle http://jsfiddle.net/DEvDe/1/。如果您打开Web开发人员工具，并单击圆圈，它会出现上述错误。谢谢。 - bsr

其他方法也存在类似的问题，例如className - 我向piwik发送了一个PR（https://github.com/piwik/piwik/issues/8346）。 - Dan Dascalescu

Answer 1

如果你必须处理不处理SVG图形的库，你可以使用类似以下代码来定义分割SVGAnimatedString。对于其他字符串原型方法，重复此操作。

 // Set a split prototype on the SVGAnimatedString object which will return the split of the baseVal on this
 // SVGAnimatedString instance
 SVGAnimatedString.prototype.split = function(){ return String.prototype.split.apply(this.baseVal, arguments); };

- John Hoven

Answer 2

这是一个简单的 Shim，可使其与现有代码配合使用：

SVGAnimatedString.prototype.toString = function () { return this.baseVal; }

- user995551

Answer 3

许多库都遇到了这个问题（即此处）。在SVG中，当你尝试获取锚点的href属性时，它会返回一个SVGAnimatedString。你可以通过使用SVGAnimatedString.baseVal来获取实际字符串。我不知道如何在不打补丁的情况下做到这一点，但这会给你一个想法：

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

- methodofaction

---

最好使用 xx.baseVal.hasOwnProperty('baseVal') 而不是 xx.baseVal != null。 - cuixiping

Answer 4

我在不使用d3的情况下遇到了同样的问题。我只使用纯SVG并将其附加到带有angularJS控制器的DOM中。问题不在于d3。您可以通过在包含链接的元素上添加返回false值到jQuery点击事件处理程序来解决此问题。

我的SVG的一部分：

<g id="1" class="node">
<a xlink:title="title">
<polygon fill="#cccccc" stroke="#cccccc" points="25,-434 25,-457 98,-457 98,-434 25,-434"></polygon>
<polygon fill="none" stroke="black" points="25,-434 25,-457 98,-457 98,-434 25,-434"></polygon>
<text text-anchor="start" x="29.5" y="-442.3" font-family="Arial" font-size="14.00">title</text>
<polygon fill="transparent" stroke="black" points="25,-412 25,-434 98,-434 98,-412 25,-412"></polygon>
<text text-anchor="start" x="37" y="-419.8" font-family="Arial" font-size="14.00">title</text>
</a>
</g>

jQuery 重载方法：

$('g.node').click(function (element) {
   return false;
});

希望这可以帮到你...

- David Slavík