我有以下标记(带有本机 SVG 的 HTML):
<!doctype html>
<!-- ...
html-Elements
... -->
<svg version="1.1" ... >
<defs> <circle id="infop" cx="0" cy="0" r="9" /> </defs>
<!-- ...
svg Elements
... -->
<svg> <!-- to have separate coordinate-system -->
<g id="outSvg"></g>
</svg>
...
一个js方法输出一行和几行<use href="infotop">
元素至#outSvg
(成为图表)。
这<use>
元素具有 onmouseover 事件来显示工具提示。
现在,当涉及到检索坐标时onmouseover-function
of the <use>
我遇到问题:
我尝试了以下不同的方法来检索值:
function showInfo(evt){
console.log("target: "+evt.target);
console.log("AttrNS: "+evt.target.getAttributeNS(null,"x"));
console.log("Attrib: "+evt.target.getAttribute("x"));
console.log("basVal: "+evt.target.x.baseVal.value);
console.log("corrEl: "+evt.target.correspondingUseElement.x.baseVal.value);
产生以下输出:
//target -> ** [object SVGUseElement] in FF, in all other browsers: [object SVGElementInstance])
//AttrNS -> Works only in FF
// * Uncaught TypeError: Object #<SVGElementInstance> has no method 'getAttributeNS'
//Attrib -> Works only in FF
// * Uncaught TypeError: Object #<SVGElementInstance> has no method 'getAttribute'
//basVal -> works only in FF
// * Uncaught TypeError: Cannot read property 'baseVal' of undefined
//corrEl -> fails in FF but works in Ch, O and IE
浏览器:FF10、Ch16、O11.61、IE9
问题:
Why is getAttribute()
在其他浏览器中失败?我错过了什么重要的事情吗?是否有一致的方法来检索值跨浏览器? (此外通过之间的切换evt.target.x
and evt.target.correspondingUseElement.x
)
重要:仅适用于 vanilla js,而且我了解浏览器开关,这不是重点!如果需要的话,我一有时间就会提供小提琴。最后——感谢您阅读本文!
编辑:* 添加了 js 错误
EDIT2:** FF 返回另一个对象而不是其他浏览器