通过JS读取HTML中的SVG元素属性
[英]Read Attributes of SVG-Elements in HTML via JS
问题描述
I have the following markup (HTML with native SVG): 
我有以下标记（HTML与本机SVG）：
<!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). js方法输出一行和几个<use href="infotop"> Elements到#outSvg （成为图形）。 The <use> Elements have onmouseover-Events to show tooltips. <use>元素具有onmouseover-Events以显示工具提示。
Now, when it comes to retrieving the coordinates in the onmouseover-function of the <use> i run into problems: 现在，当涉及到检索<use>的onmouseover-function中的坐标时，我会遇到问题：
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? 为什么getAttribute()在其他浏览器中失败？ Am I missing something important? 我错过了重要的事吗？ Is there a consistent way to retrieve the values crossbrowser ? 是否有一致的方法来检索值crossbrowser ？ (Besides via a switch between evt.target.x and evt.target.correspondingUseElement.x ) （除了通过evt.target.x和evt.target.correspondingUseElement.x之间的切换）
important: vanilla js only, and I know about browserswitches, thats not the point! 重要的是：只有香草js，我知道浏览器开关，这不是重点！ I'll provide a fiddle if needed, as soon as i find the time. 一旦找到时间，我会在需要时提供小提琴。 Finally - thank you for reading this! 最后 - 谢谢你阅读本文！
EDIT: * added the js-errors 编辑：*添加了js-errors
EDIT2: ** FF returns another Object than the other browsers EDIT2：** FF返回另一个对象而不是其他浏览器
4 个解决方案
解决方案1
5 已采纳 2012-02-18 12:35:12
Well, after reading Erik Dahlströms answer, i noticed that FF behaves wrong. 好吧，在阅读了ErikDahlströms的回答之后，我发现FF表现不对。 It should return an Element-Instance instead of the Use-Element directly. 它应该直接返回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()一致地检索属性。
解决方案2
1 2012-02-15 08:53:59
can you try this? 你能试试吗？ evt.target.getAttributeNode("x").nodeValue . evt.target.getAttributeNode("x").nodeValue 。 I tried this in safari,chrome,Firefox its working fine. 我试过这个在safari，chrome，Firefox中工作正常。
解决方案3
1 2012-02-15 21:07:22
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, eg: 你应该做的是提供一个后备解决方案，如果没有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 correspondingUseElement property, otherwise it won't have it. 如果元素是SVGElementInstance，它将具有correspondingUseElement的UserElement属性，否则它将不具有它。 Normal svg elements will not have this property, only used instances will have it. 普通的svg元素不会有这个属性，只有用过的实例才会拥有它。
解决方案4
0 2012-02-14 11:58:31
你试过evt.target.getAttributeNS(evt.target.parent.namespaceURI,"x")吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.