Interacting with SVG Diagrams


Viewing and interacting with SVG machine diagrams embedded in ECharts documentation web pages requires a web browser with SVG support. Both Safari version 3.x (for Mac OS X and Windows) and Firefox version 2.x (for Mac OS X, Linux and Windows) provide native SVG support. Firefox users should download this Firefox extension which provides pan/zoom support. For Microsoft Internet Explorer we recommend using Adobe’s SVG viewer browser plug-in version 3.x.

There are a number of ways that a user may interact with the ECharts SVG diagrams included in the generated documentation.
  • Highlight transitions and states by rolling the cursor over them.
  • Display user comments for a machine, its transitions and its states by resting the cursor over the respective machine element.
  • Clicking on a state with a nested submachine navigates the browser to the diagram of the submachine nested in the state.
  • Pan a diagram that may be too large to fit in the viewing window. For Internet Explorer, hold the ‘alt’ key while dragging the diagram. For Safari, hold the ‘shift’ key while dragging. For Firefox, click on the 'pan' tool icon and then hold the 'shift' key while dragging.
  • Zoom in and out of a diagram. For Internet Explorer, hold the ‘control’ key and click to zoom in at the mouse pointer location. Hold the ‘control’ key and click-and-drag to select a region to zoom into. Hold the ‘control’ and ‘shift’ keys and click to zoom out. You can also use the zoom commands in the context menu. For Safari, use the 'View -> Make Text Bigger'/'View -> Make Text Smaller' menu options or use the keyboard shortcuts ’command +’/ 'command -'. For Firefox, select the 'zoom' tool icon and scroll your mousewheel or press the '+'/'-' keys.


Discuss this article on the forums. (1 posts)
Last Updated ( Thursday, 13 December 2007 )