通过JS读取HTML中的SVG元素属性 [英] Read Attributes of SVG-Elements in HTML via JS
问题描述
我有以下标记(带有原生SVG的HTML):
I have the following markup (HTML with native 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>
...
一个js-method输出一行和几个< use href =infotop>
要素 #outSvg
(成为图表)。
< use>
元素有onmouseover-Events来显示工具提示。
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.
现在,当涉及检索< use>
的 onmouseover-function
中的坐标时,我遇到了问题:
Now, when it comes to retrieving the coordinates in the onmouseover-function
of the <use>
i run into problems:
我尝试了以下不同方法来检索值:
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);
产生以下输出:
//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
Browsers:FF10, Ch16, O11.61, IE9
问题:
为什么 getAttribute( )
在其他浏览器中失败了吗?我错过了重要的事吗?是否有一致的方法来检索值 crossbrowser ? (除了通过 evt.target.x
和 evt.target.correspondingUseElement.x
之间的切换)
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.x
and evt.target.correspondingUseElement.x
)
重要:只有香草js,我知道浏览器开关,这不是重点!一旦找到时间,我会在需要时提供小提琴。最后 - 感谢您阅读本文!
编辑:*添加了js-errors
* added the js-errors
EDIT2:** FF返回另一个对象而不是其他浏览器
** FF returns another Object than the other browsers
推荐答案
好了,在阅读了ErikDahlströms的回答之后,我发现FF表现得很好错误。它应该直接返回Element-Instance而不是Use-Element。
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.
我现在使用以下代码:
var el = (evt.target.correspondingUseElement)?evt.target.correspondingUseElement:evt.target;
console.log(el.getAttribute("x"));
这样我可以通过 getAttribute()$ c检索属性$ c>在所有浏览器中始终如一。
This way i can retrieve the Attributes via getAttribute()
consistently in all browsers.
这篇关于通过JS读取HTML中的SVG元素属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!