Loading and manipulation external SVG DOM using JQuery
Question
I am creating an svg document using Pydot. Here is a sample of the document:
<?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>
I would like to load this document in my javascript page which in using JQuery. My intent is to add event handler (eg mouse click on the circle to open up JQuery UI modal dialog box or Accordian). In order to get it done, I need access to SVG DOM. It doesn't seem to work the way I am doing. My Javascript code is below. The alert box doesn't show up when the text in the circle is clicked. Can anybody please show me a working example?
<!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>
Also, I read that Jquery SVG plugin needs to be used for getting access to DOM since HTML DOM is different from SVG DOM. Is that correct? Does JQuery SVG plug-in conflict with latest version of JQuery – any insight is welcome.
My final SVG document will consists of a moderately size directed graph generated by Pydot/GraphViz. Once the graph gets rendered, user interacts with it. I need to have the chosen path or node highlighted one/two levels in forward/backward direction, dialog boxes show node/edge properties based on some user action. What are the javascript components that can help me get it done quickly?
The reason I chose JQuery UI is primarily to get UI components. Do I need to look at jsNetworkX for the graph related searches, tracing the path etc. I will appreciate any help/ code snippet/ suggestion.
Thanks Abhijit
1 answers
solution1
0 2014-01-28 17:56:44
This sort of purpose is exactly why the jQuery SVG plugin was created. As far as I know it works with the latest versions of jQuery.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.