javascript - Add node navigation inside a SVG object -
want navigate 1 object/node smoothly inside svg file. used javascript library: http://flesler.blogspot.de/2009/06/jqueryserialscroll-122-released.html seems work fine. problem that, library seems work references (#nodeid) links defined outside <.svg> objects, if use reference link on object inside svg node, act incorrect, meaning not scroll smoothly defined node id. sample(the sample work fine javascript libs referenced):
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!doctype html public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <!-- generated graphviz version 2.38.0 (20140413.2041) --> <!-- title: sr_glo_main pages: 1 --> <html> <head> <link type="text/css" rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.scrollto.min.js"></script> <script type="text/javascript" src="./js/jquery.localscroll.js"></script> <script type="text/javascript"> jquery(function( $ ){ /** * jquery.localscroll's settings, belong jquery.scrollto, check it's demo example of each option. * @see http://demos.flesler.com/jquery/scrollto/ * can use every single setting of jquery.scrollto, in settings hash send jquery.localscroll. */ // default axis 'y', in demo, want scroll both // can modify default $.localscroll.defaults.axis = 'xy'; /** * note: use $.localscroll instead of $('#navigation').localscroll() * affect >> , << links. want every link in page scroll. */ $.localscroll({ //target: '#content', // selector or jquery object too. queue:true, duration:1000, hash:true, lazy:true, onbefore:function( e, anchor, $target ){ // 'this' settings object, can modified }, onafter:function( anchor, settings ){ // 'this' contains scrolled element (#content) } }); }); </script> </head> <body> <a href="#node1">section 1</a> <svg width="3249pt" height="2200pt" viewbox="0.00 0.00 3249.00 2200.00" > <g id="nodex"> <a xlink:href="#node1"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </a> </g> <g id="node1"> <circle cx="1880" cy="1580" r="40" stroke="green" stroke-width="4" fill="red" /> </g> </svg> </body>so when clicking "section 1", html center smooth transition red circle(with id node1) when press yellow circle has link reference #node1 not working , html not focused. want make work behaviour when pressing "section 1"
thank you
after investigations came solution. so, navigate inside svg 1 sub-node can:
1. use ecmascript inside html file holds svg node. need use interact svg elements. focus specific element need use "focusable" attributes described here: http://www.w3.org/tr/svgtiny12/interact.html#focusable-attr sample can find here: http://www.w3.org/tr/svgtiny12/examples/navigation.svg 'tab' can navigate 1 menu another. seems not work fine, seems there no browsers support navigation focus in manner. think in future when browsers support can use this.
in meantime can use solution 2
2. use above javascript library navigate 1 node another. modifications added that:
<script type="text/javascript"> jquery(function( $ ){ /** * jquery.localscroll's settings, belong jquery.scrollto, check it's demo example of each option. * @see http://demos.flesler.com/jquery/scrollto/ * can use every single setting of jquery.scrollto, in settings hash send jquery.localscroll. */ // default axis 'y', in demo, want scroll both // can modify default $.localscroll.defaults.axis = 'xy'; $.localscroll({ //target: '#content', // selector or jquery object too. queue:true, duration:1000, hash:true, lazy:true, onbefore:function( e, anchor, $target ){ // 'this' settings object, can modified }, onafter:function( anchor, settings ){ // 'this' contains scrolled element (#content) } }); $('#nodex').click(function() { $('html, body').scrollto(document.getelementbyid('node1'), 1000); }); }); </script>
Comments
Post a Comment