使用JQuery加载和操作外部SVG DOM
我正在使用Pydot创建一个svg文档。以下是该文档的示例：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.30.1 (20130221.2233)
-->
<!-- Title: Lineage Pages: 1 -->
<svg width="152pt" height="152pt"
viewBox="0.00 0.00 152.00 152.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 148)">
<title>Lineage</title>
<polygon fill="#b0e2ff" stroke="#b0e2ff" points="-4,5 -4,-148 149,-148 149,5 -4,5"/>
<!-- 1 -->
<g id="node1" class="node"><title>1</title>
<ellipse fill="lightblue" stroke="black" cx="72" cy="-72" rx="72" ry="72"/>
<text text-anchor="middle" x="72" y="-66.4" font-family="Times,serif" font-size="14.00">Test</text>
</g>
</g>
</svg>我想在我的javascript页面中加载这个文档，使用的是JQuery。我的意图是添加事件处理程序(例如，鼠标单击圆圈以打开JQuery UI模式对话框或Accordian)。为了完成它，我需要访问SVG DOM。它似乎不像我做的那样工作。我的Javascript代码如下。单击圆圈中的文本时，警告框不会显示。有没有人可以给我展示一个工作的例子？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="page_div"></div>
<!-- <object data="exec_chain.svg" id="svgembed" type="image/svg+xml" width="100%" height="100%"></object> -->
<!-- <input type="button" id="driver" class="btn" value="Load Data"/> -->
<!-- <input type="button" id="next" class="btn" value="Check Data"/> -->
<script type="text/javascript">
$(document).ready(function() {
$.get("test.svg", null, function(data) {
var svgNode = $("svg", data);
var docNode = document.adoptNode(svgNode[0]);
var pageNode = $("#page_div");
pageNode.html(docNode);
}, 'xml');
$("text").on("click", function() {
alert('I am here') ;
}) ;
}) ;
</script>
</body>
</html>另外，我读到Jquery SVG插件需要用来访问DOM，因为HTML DOM不同于SVG DOM。对吗？JQuery SVG插件是否与最新版本的JQuery冲突-欢迎有任何见解。
我的最终SVG文档将由Pydot/GraphViz生成的中等大小的有向图组成。一旦图形被渲染，用户就会与之交互。我需要将选定的路径或节点在向前/向后方向突出显示一/两级，对话框根据用户的某些操作显示节点/边属性。哪些javascript组件可以帮助我快速完成这项工作？
我之所以选择JQuery UI，主要是为了获取UI组件。我是否需要在jsNetworkX中查看与图形相关的搜索，跟踪路径等。我将感谢任何帮助/代码片段/建议。
谢谢Abhijit
回答 1
Stack Overflow用户
发布于 2014-01-29 01:56:45
正是出于这种目的，才创建了jQuery SVG插件。据我所知，它适用于最新版本的jQuery。
https://stackoverflow.com/questions/21412063
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号