javascript 通过JS读取HTML中SVG元素的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9275695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Read Attributes of SVG-Elements in HTML via JS
提问by Christoph
I have the following markup (HTML with native SVG):
我有以下标记（带有原生 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>
...
A js-method outputs a line and several <use href="infotop">Elements to #outSvg(to become a graph).
The <use>Elements have onmouseover-Events to show tooltips.
一个 js 方法输出一条线和几个<use href="infotop">元素到#outSvg（成为一个图形）。该<use>元素具有的onmouseover事件显示工具提示。
Now, when it comes to retrieving the coordinates in the onmouseover-functionof the <use>i run into problems:
现在，当谈到在检索坐标onmouseover-function的<use>我碰到的问题：
I tried the following different approaches to retrieve the values:
我尝试了以下不同的方法来检索值：
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);
producing the following output:
产生以下输出：
//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
Browsers:FF10, Ch16, O11.61, IE9
浏览器：FF10、Ch16、O11.61、IE9
Question:
问题：
Why is getAttribute()failing in the other browsers? Am I missing something important? Is there a consistent way to retrieve the values crossbrowser? (Besides via a switch between evt.target.xand evt.target.correspondingUseElement.x)
为什么getAttribute()在其他浏览器中失败？我错过了什么重要的东西吗？是否有一致的方法来检索值crossbrowser？（除了通过evt.target.x和之间的切换evt.target.correspondingUseElement.x）
important: vanilla js only, and I know about browserswitches, thats not the point! I'll provide a fiddle if needed, as soon as i find the time. Finally - thank you for reading this!
重要：只有 vanilla js，我知道浏览器开关，那不是重点！如果需要，我会在找到时间后立即提供小提琴。最后 - 感谢您阅读本文！
EDIT: * added the js-errors
编辑：* 添加了 js 错误
EDIT2: ** FF returns another Object than the other browsers
EDIT2: ** FF 返回另一个对象而不是其他浏览器
回答by Christoph
Well, after reading Erik Dahlstr?ms answer, i noticed that FF behaves wrong. It should return an Element-Instance instead of the Use-Element directly.
好吧，在阅读了 Erik Dahlstr?ms 的回答后，我注意到 FF 的行为是错误的。它应该直接返回一个 Element-Instance 而不是 Use-Element。
I use the following code now:
我现在使用以下代码：
var el = (evt.target.correspondingUseElement)?evt.target.correspondingUseElement:evt.target;
console.log(el.getAttribute("x"));
This way i can retrieve the Attributes via getAttribute()consistently in all browsers.
这样我就可以getAttribute()在所有浏览器中一致地检索属性。
回答by Rajkamal Subramanian
can you try this? evt.target.getAttributeNode("x").nodeValue. I tried this in safari,chrome,Firefox its working fine.
你能试试这个吗？evt.target.getAttributeNode("x").nodeValue. 我在 safari、chrome、Firefox 中尝试过这个，它工作正常。
回答by Erik Dahlstr?m
As far as I know Firefox doesn't support SVGElementInstance.
据我所知，Firefox 不支持 SVGElementInstance。
Here are a couple of tests for SVGElementInstance from the w3c SVG 1.1 Second Edition testsuite to verify:
以下是 w3c SVG 1.1 Second Edition 测试套件中对 SVGElementInstance 的几个测试，以进行验证：
What you should do is to provide a fallback solution if the SVGElementInstance isn't there, which is easy enough to detect, e.g:
如果 SVGElementInstance 不存在，您应该做的是提供后备解决方案，这很容易检测，例如：
if (elm.correspondingUseElement) {
/* elm is a used instance, not a real element */
} else {
/* fallback solution */
}
If the element is an SVGElementInstance it will have the correspondingUseElementproperty, otherwise it won't have it. Normal svg elements will not have this property, only used instances will have it.
如果元素是一个 SVGElementInstance，它将具有该correspondingUseElement属性，否则它将没有它。普通的 svg 元素不会有这个属性，只有使用过的实例才会有。
回答by mihai
Did you try evt.target.getAttributeNS(evt.target.parent.namespaceURI,"x")?
你试了evt.target.getAttributeNS(evt.target.parent.namespaceURI,"x")吗？
