程序员经验分享-hwhale

如何使用 JavaScript 访问 SVG 元素？

2024-01-08

我正在摆弄 SVG，希望能够在 Illustrator 中创建 SVG 文件并使用 JavaScript 访问元素。

这是 Illustrator 推出的 SVG 文件（它似乎还向我删除的文件的开头添加了一堆垃圾）：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242"
     xml:space="preserve">
<path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
    c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
    L34.074,86.094z"/>
<path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074
    l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
    l-19.259-39.259L92.593,8.316L68.148,32.761z"/>
<polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909 
    194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983 
    163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/>
<path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593
    l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
    l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/>
</svg>

正如您可能看到的，每个元素都有一个 ID，我希望能够使用 JavaScript 访问各个元素，这样我就可以更改fill属性并响应点击等事件。

HTML 非常基础：

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Illustrator Test</title>
    </head>
    <body>
    
        <object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
    
    </body>
</html>

我想这确实是两个问题：

  1. 是否可以用这种方式来实现，而不是使用 Raphaël 或 jQuery SVG 之类的东西？

  2. 如果可以的话，技术是什么？

UPDATE

目前，我已经使用 Illustrator 来创建 SVG 文件，并且我正在使用拉斐尔·JS https://dmitrybaranovskiy.github.io/raphael/创建路径并简单地从 SVG 文件复制点数据并将其粘贴到path()功能。通过手动编码点数据来创建地图可能需要的复杂路径（据我所知）极其复杂。


是否可以用这种方式来实现，而不是使用 Raphael 或 jQuery SVG 之类的东西？

确实。

如果可以的话，技术是什么？

这个带注释的代码片段的工作原理：

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Illustrator Test</title> 
    </head>
    <body>

        <object data="alpha.svg" type="image/svg+xml"
         id="alphasvg" width="100%" height="100%"></object>

        <script>
            var a = document.getElementById("alphasvg");

            // It's important to add an load event listener to the object,
            // as it will load the svg doc asynchronously
            a.addEventListener("load",function(){

                // get the inner DOM of alpha.svg
                var svgDoc = a.contentDocument;
                // get the inner element by id
                var delta = svgDoc.getElementById("delta");
                // add behaviour
                delta.addEventListener("mousedown",function(){
                        alert('hello world!')
                }, false);
            }, false);
        </script>
    </body>
</html>

请注意，该技术的一个限制是它受到同源策略的限制，因此alpha.svg必须与托管在同一域上.html文件，否则对象的内部 DOM 将无法访问。

重要的事情要运行此 HTML，您需要将 HTML 文件托管到 Web 服务器（例如 IIS、Tomcat）

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

javascript

SVG

raphael

如何使用 JavaScript 访问 SVG 元素？ 的相关文章

  • 如何在CKEditor 5中监听焦点事件

    我想听一下 CKEditor 5 中的焦点事件 我认为这样的事情会起作用 但回调从未被调用 document querySelector editable ClassicEditor create el then editor gt edi

  • SVG 坐标与变换矩阵

    我想在矩形元素上实现像 svg edit 这样的功能 旋转矩形 调整大小 Drag 旋转 SVG 矩形效果很好 但是当我想调整矩形大小时 它就会出现问题 坐标不正确 我使用变换矩阵来旋转targetelement setAttribute

  • 如何在 Chrome 中实现抓取光标图标？

    我知道可以在 Chrome 中使用抓取光标图标 当然是在 Gmail 中 但我不知道如何在我的代码中实现它 我已经尝试过 在CSS中 body cursor grab body cursor webkit grab body cursor

  • 区分单击与 mousedown/mouseup

    我已经阅读了有关这种情况的 stackoverflow 上的几个答案 但没有一个解决方案有效 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作 有可能做到这一点吗 onMouseDown 将在按下左侧或右

  • WebDriver：更改事件未触发

    我有一个使用 KnockoutJS 的应用程序 我正在尝试编写一些测试表单的测试 如果您不了解 KnockoutJS 简单来说 它提供了从我的视图到我的数据模型的绑定 这意味着当我在输入字段中键入值时 我的基础对象会自动使用该输入字段值进行

  • 如何在 JavaScript 中构建一个计算数组中出现次数的对象？

    我想计算数组中某个数字出现的频率 例如 在Python中我可以使用Collections Counter创建一个字典 记录某个项目在列表中出现的频率 据我所知 JavaScript 是这样的 var array 1 4 4 5 5 7 va

  • Angular-Datatables + Angular-xeditable：取消可编辑行

    当组合 Angular DataTables 和 Angular XEditable 时 添加新行时会取消可编辑行 这是jsfiddle https jsfiddle net faj61h5d 10 示例操作如下 1 这是初始状态 2 将第

  • 转换 SVG 过滤器

    我正在尝试创建一个像 SVG 圆圈上的阴影这样的材质设计 我希望当您单击圆圈时 这个阴影能够以良好的过渡来增长 但目前我正在努力弄清楚是否可以为这种过渡设置动画 所以我希望有人能够提供帮助 我添加了一个到目前为止所得到的小例子 一个带有阴影

  • Rails 4 - 带有 dependent-fields-rails 的条件 JS

    我正在尝试弄清楚如何在我的 Rails 4 应用程序中使用 dependent fields rails gem 我迷路了 我已将 underscore js 包含在我的供应商 javascripts 文件夹中 并更新了我的 applica

  • 如何使用 selenium 获取 javascript 结果？

    我有以下代码 from selenium import selenium selenium selenium localhost 4444 chrome http some site com selenium start sel selen

  • 比较 javascript 元素和 scala 变量的 Play 框架 Twirl 模板

    如下面的代码示例所示 我想比较 scala 辅助元素内的 javascript 元素 然而 即使存在元素 abcde 它也始终返回 false 除了使用标签之外 如何获取 scala 辅助元素内的 javascript 值 appSeq S

  • 在外部单击时关闭弹出 div

    我有一个弹出 div 仅在单击特定按钮时显示 单击同一按钮时它甚至会隐藏 我的问题是 我还想在单击外部任何地方时隐藏 div 我无法这样做 因为弹出 div 位于主包装类内部 并且无法通过在包装类上使用 click 事件并使其隐藏来做到这一

  • 在 d3.js 中换行长文本

    我想将长文本元素换行为宽度 这里的例子取自博斯托克的wrap功能 http bl ocks org mbostock 7555321 但似乎有两个问题 首先 wrap的结果没有继承元素的x值 文本左移 其次它绕在同一条线上 并且lineHe

  • Javascript - 如何计算数字的平方？

    使用 JavaScript 函数 function squareIt number return number number 当给定数字 4294967296 时 函数返回 18446744073709552000 每个人都知道真正的答案是

  • Jade（当前称为“Pug”）模板引擎中的循环

    我想使用一个简单的循环 例如for int i 0 i lt 10 i 如何在 Jade 引擎中使用它 我正在使用 Node js 并使用expressjs 框架 例如 for var i 0 i lt 10 i li array i 你可

  • 在 中动态添加链接样式表 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 如何将链接

  • 地址更改时如何停止 Angular 重新加载

    我正在使用 Angular 的scrollTo and anchorScroll像这样 app controller TestCtrl function scope location anchorScroll scope scrollTo

  • 我可以防止将 Leaflet 地图平移到世界边缘之外吗？

    有没有办法限制平移到世界边缘之外 在这幅画中 棕色是世界 灰色是虚空 我想让它不可能像这样平移 Leaflet 允许您控制地图抵抗被拖出边界的程度maxBoundsViscosity选项 值 0 到 1 将其设置为最大值会完全禁用拖动出界

  • 使用 stopPropagation() 处理 React 事件委托

    我有一个 React 项目 应该可以放置在任何网站上 我的想法是 我托管一个 javascript 文件 人们放置一个具有特定 ID 的 div 然后 React 在该 div 中进行渲染 到目前为止 除了点击事件之外 这是有效的 这些事件

  • Angular 5 中 Observable.ForkJoin 的重复 Http 请求

    我有一个 Angular 5 应用程序 组件中包含以下代码 ngOnInit Observable forkJoin this highlightedInsight this insightService getHighlightedIns

随机推荐

  • WCF 跟踪上未找到配置评估上下文警告

    我有一组托管在 NET 4 应用程序上的 WCF 服务 我手动创建 ServiceHost 类并开始侦听 TCP 端口 一切都按预期工作 但在服务器端的 WCF 跟踪中 我收到以下警告 未找到配置评估上下文 XML 跟踪如下

  • 强制执行 M-M 关系的触发器

    假设我有以下架构 DEPARTMENT DepartmentName BudgetCode OfficeNumber Phone EMPLOYEE EmployeeNumber FirstName LastName Department P

  • 正则表达式在一行上查找 A 而不是 B

    我正在寻找一个正则表达式来搜索我的 python 程序以查找其中的所有行foo 但不是bar 作为关键字参数传递到方法中 我正在尝试前瞻和后瞻断言 但运气不佳 有什么帮助吗 Thanks 如果你有一个字符串foo您要查找的字符串和另一个字符

  • 无法通过 CMake 链接 Boost 1.63.0

    我想做的是 正如你可以从标题中猜到的那样 通过 CMake 链接 Boost 库 我正在使用 CLion 编写跨平台代码 所以我没有其他机会 我确信我正确构建了所有内容 因为当我在 Visual Studio 中使用它时 它完全可以正常工作

  • 使用 python opencv 跟踪白色

    我想使用网络摄像头和 python opencv 跟踪白色 我已经有了跟踪蓝色的代码 frame cap read hsv cv2 cvtColor frame cv2 COLOR BGR2HSV define range of blue

  • 有没有办法在触发 lambda 之前过滤 AWS DynamoDb Stream？

    因此 我们有几个 lambda 来监听数据库上的更改 在每个 lambda 中 我们必须在一开始就进行过滤 因为这个特定的 lambda 不关心所有更改 只关心特定的更改 更明确地说 我们正在应用事件源 并且 lambda 应该是事件处理程

  • android中的tab时如何刷新ListView

    我的应用程序有三个选项卡ListView显示在每一个里面 如何编写刷新代码ListView当在选项卡之间单击时 Override public void onTabChanged String tabId if tabId tab 1 re

  • 日期功能以 mm/dd/yy 显示日期

    我正在尝试使用 VB 脚本获取 mm dd yy 格式的日期 但我找不到任何功能来满足要求 有人可以帮助我吗 我喜欢使用 NET stringbuilder 因为我可以通过调整格式说明符而不是使用字符串操作来动态切换格式 wscript e

  • 将存储过程和其他变量插入临时表

    我有一个存储过程和 3 个变量 我需要将它们全部插入临时表中的同一行 这可能吗 我试过 INSERT INTO Temp Ad B C SPInt SELECT Ad B C EXEC sp XYZ A B C 但这是行不通的 最简单的方法

  • Chart.js 为刻度添加填充

    我需要在 x 轴和 y 轴上添加填充 这个问题 如何在 Chart js 中的 Graph 和 X Y Scale 之间添加填充 https stackoverflow com questions 32095839 how to add p

  • Adsense 的自定义点击跟踪

    我需要在点击广告时识别我的用户 例如 当用户A在线时 我需要知道他是点击广告单元的人 当使用我自己的广告时 这是小菜一碟 使用 URL 重定向 但是 现在我们计划切换到 Adsense 它通过 javascript 呈现广告 因此我无法在那

  • Akka Http - 如何将 ResponseEntity 解组到 CustomClass？

    我正在使用 Akka Http 向第 3 方 API 发出请求 响应是 application json 我想使用 Akka Http 将它们转换为自定义案例类 我想做这样的事情 val request RequestBuilding Ge

  • 如何使用 Chrome 扩展更改当前选项卡的标题

    我想使用扩展名更改选项卡的标题 实际上 我在使用时遇到了困难 chrome tabs get 函数 选项卡 如何使用上面的功能呢 还有其他方法可以直接更改标题吗 chrome tabs query active true windowId

  • 如何在 Linux 中将“find”的结果通过管道传输到 mv

    如何通过管道将 查找 在 Linux 中 的结果移动到不同的目录 这是我到目前为止所拥有的 find name article mv backup 但它还不对 我收到错误缺少文件参数 因为我没有指定文件 因为我试图从管道获取它 find n

  • 为什么从数据源中删除项目时，DGV 会导致未捕获的异常？

    我有一个带有 DataGridView 的 WinForms 应用程序 该应用程序的 DataSource 属性设置为 BindingSource 反过来又具有itsDataSource 设置为 BindingList 一切工作正常 直到我

  • 如何使用 Keystone.js 添加 Array 类型的虚拟属性？

    这是我的模型的代码 Info 及其造成问题的 tokens 属性 var keystone require keystone Types keystone Field Types var Info new keystone List Inf

  • Python 如何以及何时确定变量的数据类型？ [复制]

    这个问题在这里已经有答案了 我试图弄清楚 Python 3 使用 CPython 作为解释器 到底是如何执行其程序的 我发现步骤是 通过 CPython 编译器将 Python 源代码 py 文件 编译为 Python 字节码 pyc 文件

  • 返回父元素 - Cypress 中的 CSS 选择器

    有人可以在以下情况下提供帮助吗 我必须办理登机手续if语句元素是否存在 由于没有可能使用Xpath in find命令 使用 Xpath 运行时引发语法错误 我的代码看起来 cy xpath list eq index then el1 g

  • Bluebird 的 Promise.settle 无法解析正确的值

    我有以下代码 return Promise settle matches imgur uploadUrl map function inspection if inspection isFulfilled return inspection

  • 如何使用 JavaScript 访问 SVG 元素？

    我正在摆弄 SVG 希望能够在 Illustrator 中创建 SVG 文件并使用 JavaScript 访问元素 这是 Illustrator 推出的 SVG 文件 它似乎还向我删除的文件的开头添加了一堆垃圾

热门标签