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

2024-04-13

我有以下标记(带有本机 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 返回另一个对象而不是其他浏览器


嗯,读完之后埃里克·达尔斯特罗姆的回答 https://stackoverflow.com/questions/9275695/read-attributes-of-svg-elements-in-html-via-js#9301408,我注意到 FF 的行为不正确。它应该返回一个元素实例而不是直接返回使用元素。

我现在使用以下代码:

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

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

这样我就可以通过检索属性getAttribute() https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute在所有浏览器中保持一致。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

通过 JS 读取 HTML 中 SVG 元素的属性 的相关文章

  • 使用 JavaScript 格式化日期

    JavaScript 中的日期格式有问题 这是我的函数代码 originalDate 2016 03 02 09 12 14 989522 var d new Date originalDate month d getMonth 1 day
  • 提升变量有目的吗?

    我最近学习了很多 JavaScript 并且一直在尝试理解提升变量的值 如果有的话 我 现在 明白JS是一个两遍系统 它编译然后执行 另外 我知道 var 关键字 存在 在它声明的词法范围中 因此如果在引擎为其赋值之前调用它 那么它是 未定
  • 如何检查是否存在可能的路径?

    我正在开发一个基于 javascript 的实验性游戏 玩家必须在二维平铺地图上移动才能退出 请随意检查这个小提琴并演奏 http jsfiddle net moonlife 74vLd 我只是随机放置障碍物 但有时障碍物会挡住玩家和出口之
  • SVG 文本无法在 Chrome 或 Safari 中呈现

    我有一些 SVG 文本在 Firefox 上运行良好 但在 Chrome 和 Safari 中却没有出现 我努力了 向 svg 容器添加填充 以防文本被隔断 从文本中删除 xml space preserve 添加内联填充颜色
  • Chrome 扩展程序可以相互通信吗?

    我正在编写一个Chrome扩展程序 并且想要实现一个接口或api 以便我将来制作的其他扩展程序可以使用它 最终的效果可能如下 分机 B 呼叫extensionA someMethod someParameters 并向分机A发送一些数据 分
  • 在 Java 中使用 Batik 检查和删除 SVG 中的属性

    这个问题基本上说明了一切 如何检查 SVG 是否具有 viewBox 属性 我正在使用蜡染库 我需要这个 因为我需要 至少 通知用户有一个 viewBox 属性 我可以删除它吗 使用 org w3c dom 类 您可以按照以下方式做一些事情
  • 需要参数的addEventListener(和removeEventListener)函数

    我需要向 8 个对象 手掌 添加一些侦听器 这些对象是相同的 但行为必须根据它们的位置而改变 我有以下 丑陋的 代码 root palmsStatus B B B B B B B B if root palmsStatus 0 N root
  • Node.js Express 4.0 中的 res.render 回调参数的用途是什么?

    目的是什么res render回调参数 在什么情况下 由于模板已被指定为第一个参数 因此人们会想要使用这样的回调参数 这是文档中的代码 send the rendered view to the client res render inde
  • Javascript:我应该隐藏我的实现吗?

    作为一名 C 程序员 我有一个习惯 将可以而且应该私有的东西设为私有 当 JS 类型向我公开其所有私有部分时 我总是有一种奇怪的感觉 而且这种感觉并没有被 唤起 假设我有一个类型draw方法 内部调用drawBackground and d
  • Rangy:插入符号下的单词(再次)

    我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器 基本上 我需要能够插入人员 标签引用 例如 Twitter Github Facebook 我发现一些人试图实现同样的事情的代码 http jsfiddle net A
  • 使用 # 时锚点 标签在 Chrome 中不起作用

    这是我在页面上使用的代码 li a href explore Sound Sound a li 在所有页面上出现的菜单中 a a 在我想要链接的页面上 我尝试过使用 id 将内容添加到标签中 但仅在 Chrome 中 浏览器不会向下滚动到该
  • 如何按 Angular 表中的属性(该属性具有单个 rownspan)进行分组?

    我没有找到这个问题的合适标题 我的问题是 例如 我有一个包含两列的表 列汽车品牌和列汽车型号 我希望表是 like in this picture 换句话说 品牌名称只会出现 1 次 我的输入数组采用以下 json 格式 brand Aud
  • 如何根据另一个下拉列表中的选择动态填充下拉列表中的选项?

    我有一个表 其中包含类别信息 例如产品 我已将它们列在下拉菜单中 现在 我需要做的是 在下一个下拉菜单中列出所选类别的子类别 我希望 javascript 是必需的 但我对 javascript 还不太熟悉 将非常感谢您的帮助 你应该使用
  • 在 Android Chrome 中隐藏 HTML5 音频/视频通知

    我的网络应用程序上有一个 HTML5 音频元素 在某些时候 我使用以下代码以编程方式停止播放 audioElement pause audioElement currentTime 0 播放音频时 我的 Android 设备 使用 Goog
  • for循环中需要声明变量吗?

    有什么区别 for var i 0 i lt 5 i for i 0 i lt 5 i 是否有必要包含 var 关键字 我知道 var 关键字会影响变量范围 但我无法理解是否有必要在 for 循环中包含该关键字 在第二个示例中 您的变量是全
  • 如何从除自身之外的其他(blazor)库引用js/css文件?

    我如何引用 使用位于引用的 blazor 项目中的 css cs 文件 该文件与 host cshtml 中的当前项目不同 我的意思是
  • 在 React Web 应用程序中使用 createjs-soundjs

    我想用https www npmjs com package createjs soundjs https www npmjs com package createjs soundjs在 React Web 应用程序上播放声音 我正常安装了
  • 如何使用 javascript 更改文件扩展名

    有谁知道在 Javascript 中更改文件扩展名的简单方法吗 例如 我有一个带有 first docx 的变量 但我需要将其更改为 first html 这将改变字符串包含文件名 let file first docx file file
  • $ 在 JQuery 中意味着什么

    在下面的 var obj one 1 two 2 three 3 four 4 five 5 each obj function i val console log val 这里是什么意思 是对象吗 是一个别名jQuery对象 函数 它充当
  • 如何通过点击复制 folium 地图上的标记位置?

    I am able to print the location of a given marker on the map using folium plugins MousePosition class GeoMap def update

随机推荐

  • 访问表的第n列

    我有一个包含以下结构和数据的表 tr td td tr
  • 服务绑定到活动

    这是我的代码 public class MainActivity extends Activity private ComponentName mService private Servicio serviceBinder private
  • Checkstyle,无法创建根模块

    我正在尝试在项目中配置 Checkstyle 我已经添加 apply plugin checkstyle checkstyle assign the latest checkstyle version explicitly default
  • 如何通过 selenium-webdriver 和 Java 使用 java 实现鼠标悬停

    在尝试实现门户自动化时http demo nopcommerce com http demo nopcommerce com 我无法将鼠标悬停在 电子 菜单上并选择 相机和照片 子菜单 使用以下脚本进行相同的操作 WebElement el
  • 为什么 Matplotlib 颜色图的结构不同?

    我能够绘制 RGB 分量some使用这个简单的 Python 脚本绘制 Matplotlib 颜色图 import numpy as np import matplotlib pyplot as plt from matplotlib im
  • R Shiny:渲染summary.ivreg输出

    我正在尝试在 R Shiny 中呈现工具变量回归摘要 这是代码 iv ivreg lwage educ exper nearc4 exper summary iv 当我使用 renderTable 时 出现以下错误 没有适用于 xtable
  • angular2动态表格计算金额总计

    尝试计算总 payOffs amount payOffs 是一个 FormArray 不知道如何正确执行 以便总数会观察到当前金额和新金额的变化 这是我作为基本代码的 plnkr http plnkr co edit nHSIsciSZNT
  • 使用 C++ 基类构造函数?

    在使用模板时 我遇到需要使基类构造函数可从继承类访问以创建对象 以减少复制 粘贴操作 我想通过这样做using关键字与函数 case 的方式相同 但不起作用 class A public A int val class B public A
  • 无法获取 Cabal 更新以在公司网络内工作

    我正在尝试在工作中使用 haskell 我已经安装了 HP 但无法让 cabal 进行更新 我认为这是一些防火墙或 DNS 问题 cabal update Downloading the latest package list from h
  • 如何在 JNI 中读取字节数组?

    是否可以在 JNI 中引用整个字节数组而不调用任何副本 在本机 C 代码中 我有一个从 Java 传递的字节数组 我只想将一些数据与该字节数组进行比较 因此我不想进行任何内存复制 是否可以 我知道我可以通过使用类似的 GetPrimitiv
  • Tango 的未来与 D1 的停产

    知道D1 will be discontinued effective December 31 2012 鉴于官方发行版位于 D1 之下 是否还值得继续使用 Tango 如果您谈论的是一旦 D1 的官方支持消失 是否值得继续使用 Tango
  • VirtualEnv 和 python-embed

    我有一台使用 Python 2 运行许多应用程序的 Windows 机器 我想添加一个使用 Python 3 编写的新程序 为了确保我不会搞砸任何事情 我想使用嵌入了 Python 3 的 Virtualenv Python 3 嵌入 am
  • 将两个变量加在一起?

    然而 尝试将两个整数变量添加在一起 我似乎无法弄清楚 因为它只是将它们作为字符串连接起来 var age child 10 var age gap 10 alert age child age gap 结果 1010 想要的结果 20 va
  • 使用
    制作大引号

    几年前 我使用该标签在我的网站上创建了一个引用 带有大引号 现在我想做同样的事情 但它不再起作用了 我唯一得到的是小 而不是大的 如何找回旧的 大的 Thanks 我相信您正在寻找这样的东西 blockquote font family G
  • 如何创建一个圆形按钮?

    我想创建一个圆形按钮 这个按钮应该看起来像一个圆圈 此代码给出了圆形矩形按钮 UIButton button UIButton buttonWithType UIButtonTypeRoundedRect button frame CGRe
  • 如何在 Python Selenium 中实现类似 TestNG 的功能或在一个测试套件中添加多个单元测试?

    假设我有这两个鼻子测试ExampleTest1 py和ExampleTest2 py ExampleTest1 py class ExampleTest1 TestBase def testExampleTest1 self if name
  • Tensorflow 中的深度复制

    张量流中有深度复制吗 考虑以下操作 tt tf get variable t shape 2 2 tt1 tf identity tt 0 assign 1 1 tt2 tf identity tt 1 assign 2 2 我希望 tt1
  • 哪些变量类型/大小在 STM32 微控制器上是原子的?

    以下是 STM32 微控制器上的数据类型 http www keil com support man docs armcc armcc chr1359125009502 htm http www keil com support man d
  • 使用ScheduledExecutorService时Java webapp内存泄漏

    我的 Tomcat 7 报告我的 web 应用程序中可能存在内存泄漏 SEVERE The web application mywebapp appears to have started a thread named pool 1 thr
  • 通过 JS 读取 HTML 中 SVG 元素的属性

    我有以下标记 带有本机 SVG 的 HTML