在 svg 中,如果我使用淘汰赛来设置xlink:href
属性为a
节点,属性的命名空间设置不正确,因此a
单击时不能用作链接。
例如,请考虑以下包含两个链接的椭圆的 svg。有其一xlink:href
属性是硬编码的,另一个是通过淘汰赛设置的data-bind
属性:
<svg width="5cm" height="6cm" viewBox="0 0 5 6" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x=".01" y=".01" width="4.98" height="5.98"
fill="none" stroke="blue" stroke-width=".03"/>
<a xlink:href="#hardcoded">
<ellipse data-bind="attr: blue" />
</a>
<a data-bind="attr: { 'xlink:href': href }">
<ellipse data-bind="attr: red" />
</a>
</svg>
让淘汰赛运行起来非常简单:
ko.applyBindings( {
blue: { cx:2.5, cy:1.5, rx:2, ry:1, fill:"blue" },
href: '#foo',
red: { cx:2.5, cy:4.5, rx:2, ry:1, fill:"red" },
});
但只有硬编码的链接才有效。如果我添加一些代码来查看namespaceURI
属性节点的值,我可以看到
这xlink:href
通过淘汰赛设置的属性有一个null
namespaceURI,而不是硬编码的,后者设置为http://www.w3.org/1999/xlink
.
Array.forEach( document.getElementsByTagName('a'), function(a){
a.setAttribute('title', 'xlink:href namespaceURI = ' + a.getAttributeNode('xlink:href').namespaceURI);
});
You can 在小提琴中查看这一切 http://jsfiddle.net/ZghP7/.
有没有一种简单的方法可以告诉淘汰赛属性的正确命名空间应该是什么,或者我是否需要编写自定义绑定?