gpt4 book ai didi

javascript - 通过 JS 读取 HTML 中 SVG 元素的属性

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:36:41 24 4
gpt4 key购买 nike

我有以下标记(带有原生 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-method输出一行和几行<use href="infotop"> #outSvg 的元素(成为图表)。<use>元素有 onmouseover-Events 来显示工具提示。

现在,在检索 onmouseover-function 中的坐标时的 <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

问题:

为什么是getAttribute()在其他浏览器中失败?我错过了什么重要的东西吗?是否有一种一致的方法来检索值 crossbrowser? (除了通过 evt.target.xevt.target.correspondingUseElement.x 之间的切换)

重要:仅 vanilla js,我知道浏览器开关,这不是重点!如果需要,我会在找到时间后立即提供 fiddle 。最后 - 感谢您阅读本文!

编辑:* 添加了 js 错误

EDIT2:** FF 返回另一个对象而不是其他浏览器

最佳答案

好吧,在阅读了 Erik Dahlströms 的回答后,我注意到 FF 的行为是错误的。它应该返回一个 Element-Instance 而不是直接返回 Use-Element。

我现在使用以下代码:

var el = (evt.target.correspondingUseElement)?evt.target.correspondingUseElement:evt.target;

console.log(el.getAttribute("x"));

这样我就可以在所有浏览器中通过 getAttribute() 一致地检索属性。

关于javascript - 通过 JS 读取 HTML 中 SVG 元素的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9275695/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com