I am building my own line graph and wanted to know how would I go about making a <path> line interactive on hover.
For example (simplified):
<path d="M5,10L10,20L30,40"></path>
How would I execute a hover event when the user hovers over 5,10 or 10,20 and show a <circle> or just a command in general? Is there something I'm missing or do I have to detect the mouse's position?
SVG has a concept called markers that allow arbitrary shapes to be added to path nodes but markers cannot receive events, per the last line in the SVG marker specification text.
Event attributes and event listeners attached to the contents of a ‘marker’ element are not processed; only the rendering aspects of ‘marker’ elements are processed.
If you think this should change, take it up with the w3c SVG group.
If you want to respond to events you'd have to manually create your own shapes and ensure that they happen to be situated at the correct points.
Related
I would like to display tooltips on markers setup on a <path> element.
As several old posts pointed out, any events are not processed on markers as defined by the official SVG standard.
Links:
SVG Marker onHover Event (Graph)
Chrome SVG marker element onmouseover
Questions:
Since the linked questions are a few years old, is there an update to this? Is this still the case in the current 2021 world to not be able to receive events on marker elements?
Is there an alternative that is easy to implement and results in fast code for large sets of markers? My only idea currently is to render invisible <circle> elements on top of every marker in order to properly process events. Are there better options?
I have done zooming in SVG chart. Please refer below screenshot.
above screenshot series is zoomed state.i used clipping concept to hide the outside lines from chart area after zooming.
i need to do panning here ? how can i implement like google maps. when i start pan to move the series and see the zoomed chart of another area.
how can i perform "translate" operation for path element in SVG. element in the screenshot is called series (i.e. data points /line).
i need to move the element zoomed area based on mouse movec(i.e. like scrolling the hidden content).
Is "translate" attribute is used to view the other zoomed area ? how can i perform "translate" in path element that will make the panning.
Normal chart screenshot.
Zoomed Screenshot.
Please refer below link.
http://www.cyberz.org/projects/SVGPan/tiger.svg
Thanks,
Siva
First be sure:
Download svgpan.js file in your project location
is must be the right place in your code
You must add this: xmlns:xlink="http://www.w3.org/1999/xlink"
I am playing with generating dot files and then turned them into SVG graphs with a lot of nodes.
My question is that are there event listeners to detect mouse clicks on dot/SVG graph nodes?
For example, right click on a node in the SVG graph, I do something(maybe get the related information from the node and then do something),
Then how to generate dot file or SVG file to achieve this?
There are several ways to create an interactive SVG graph:
Use SMIL, an extension to svg (Example tutorial http://apike.ca/prog_svg_smil.html)
Javascript (the Raphael library is excellent)
CSS animations
In any case, you'll have to display the svg graphs in a client which supports any of those technologies (browser), and you will have to code it in addition to the svg output graphviz creates.
Just another thought on this (realizing the question is old, but maybe it helps someone coming across).
Depending on what you want to do, it may be easiest to decouple the event handling from the drawing. I mean, you can find out where graphviz positions the nodes (as well as edges, labels etc.), see, for example, this post on how to do it in python. Then you can paint the graph in the background of whatever GUI you're using, and use its native event handling to react on on_click by placing invisible clickable objects over the nodes.
If you want interactive graphs then graphviz might not be the best choice.
I'd recommend having a look at D3.js. Perhaps you could construct the graph data in json and load them with D3?
So here is the problem:
I am trying to create dynamic buttons that have text. The text will be generated dynamically so the svg object doesn't know the size of the text. There are two things that I am looking to do and I hope that SVG will do this
First I want the left and right edge of the svg element to stay the same even if I scale the element horizontally
The problem is that I have to set a width on the svg otherwise it doesn't show up when I display the page. Also on the Home and blog buttons you can see that the edge is compressed. I want the edge to stay the same no matter how much text is in the element.
Also I can't seem to set the scale or width properly even with a javascript .getComputedTextLength()
Any help or a point in the right direction would be very helpful
Buttons that are sized to their text content is functionality that can be adressed with Raphael's getBBox()
The use of this js library means that you are implicitly using SVG or VML and this functionality is more easily addressed by referencing this JavaScript library
To see the getBBox() function in action you could visit the Autobox example here:
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2
I am working on a SVG application and now want to let a user resize an object using draggable corners, very much like in SVG-edit (http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html).
The functionality should work as follows: The user selects an SVG object, drags it to the main ‘canvas’ and once on the ‘canvas’, four corners on the outside of the object appear, the user can drag on each of the corner points & drag to enlarge the object. The objects will be rectangular in shape and created using paths, not using the SVG ‘rect’ function.
Would anyone have any suggestions as to how this should be implemented?
Thanks in Advance
You could take a look at some existing open source implementations. svg-edit is one which you already mentioned.
To showcase a tool that I developed, I wrote a demo which implements this functionality. This which may serve as a simpler and more restrictive example than svg-edit, as it doesn't do too much other than allow you to draw rects and circles, and rotate/translate/scale them.
I have edited jquery to make rect draggable, recently put them in a g and lost this functionality. The g doesn't contain the position data.
Might be possible to bubble down to the children elements.