Customizing the Adobe SVG Viewer Context Menu Starting with version 3.0 of the Adobe SVG Viewer, SVG authors are allowed to modify the menu that pops up when the user right-clicks on the SVG.
Before you do this, however, you would do well to keep in mind some common-sense guidelines (as posted by MichaelBierman and others on the SVG-Developers list):
Don't hide the Help item
Don't hide the About ASV item (Adobe and the people who created ASV deserve credit, and you might be violating the ASV EULA; also, the menu may not work)
Don't rearrange the existing menu items (users should be able to depend on them being in the same order, etc.)
Do turn off items that don't make sense (i.e. there is no need to Zoom or Pan on some content--it will just "break"); however, keep in mind that visually impaired users may need to zoom in to see your content
Tips:
Disabling, rather than removing, items provides a consistant interface without allowing users to perform unwanted actions, such as zooming or saving the SVG
Customizing the Menu*
First, you declare a <def> to define the new menu:
<defs>
<menu id='NewMenu' xmlns='http://foo' onload='GetPosition( evt )'>
<header>Custom Menu</header>
<item action='ZoomIn'>Zoom &In</item>
<item action='ZoomOut'>Zoom &Out</item>
<item action='OriginalView'>&Original View</item>
<separator />
<item onactivate='MyFunction()'>&My Function</item>
<menu>
<header>Submenu</header>
<item onactivate="alert('Item1')">Item1</item>
<item onactivate="alert('Item2')">Item2</item>
<item onactivate="alert('Item3')">Item3</item>
</menu>
<separator />
<item xmlns='http://www.w3.org/1999/xlink' xlink:href='inserted_link.html' target='resource window'>Menu Link...</item>
<separator />
<item action='Quality'>Higher &Quality</item>
<item action='Pause'>&Pause</item>
<item action='Mute'>&Mute</item>
<separator />
<item action='Find'>&Find...</item>
<item action='FindAgain'>Find &Again</item>
<separator />
<item action='CopySVG'>&Copy SVG</item>
<item action='ViewSVG'>&View SVG...</item>
<item action='ViewSource'>View Sourc&e...</item>
<item action='SaveAs'>&Save SVG As...</item>
<item action='SaveSnapshotAs'>Sa&ve Current State...</item>
<separator />
<item action='Help'>&Help...</item>
<item action='About'>About SVG Viewer...</item>
</menu>
</defs>
Several key points should be noted from the code above:
Each entry on the menu is marked by an <item> tag.
The <separator /> tag creates a separator bar on the menu.
Nested <menu> tags create sub-menus; the header for these sub-menus is not selectable
To access the built-in functions of the SVG Viewer, you include an 'action' property
To access author-defined functions, you include an 'onactivate' property
In order to insert a link on the menu, you must resolve the XML NameSpace for XLink and preface the link with 'xlink:'
xmlns='http://www.w3.org/1999/xlink'
xlink:href='inserted_link.html'
In addition, each <item /> can have one or more of the following properties:
checked='yes|no' --this indicated whether a particular option is active, as on the 'Higher Quality' option
enabled='yes|no' --if this property is set to "no," the option will be visible, but grayed-oout, and can't be selected
display='none|inline' --if this property is set to "none," the option will be not be visible
--------------------------------------------------------------------------------
Next, in order to use this menu, you must overwrite the original Context Menu with the new definition, in the script section of your SVG:
<script>
<![CDATA[
var newMenuRoot = parseXML( printNode( document.getElementById( 'NewMenu' ) ), contextMenu );
contextMenu.replaceChild( newMenuRoot, contextMenu.firstChild );
]]>
</script>
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → [转帖]Customizing the Adobe SVG Viewer Context Menu
(订阅本版)
2005/2/27 11:12:00
新浪微博
[转帖]Customizing the Adobe SVG Viewer Context Menu
