SVG自定义菜单

最新推荐文章于 2022-08-27 09:18:23 发布

asp20

最新推荐文章于 2022-08-27 09:18:23 发布

阅读量343

点赞数

CC 4.0 BY-SA版权

分类专栏： SVG 文章标签： JavaScript .net XML ViewUI

本文链接：https://blog.youkuaiyun.com/asp20/article/details/83455452

SVG 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用SVG实现自定义上下文菜单的方法。该菜单包含缩放和平移等功能选项，并通过JavaScript进行交互控制。此外，还演示了如何创建子菜单及链接，实现了更加丰富的用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg onload="initDocument(evt)" 
		xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
	<defs>
		<menu id='newMenu'> /* 定义新菜单 */
			<header>Custom Menu</header>
			<item action='ZoomIn'>Zoom In</item>
			<item action='ZoomOut'>Zoom Out </item>
			<separator/> /* 定义分割符 */
			<menu> /* 定义子菜单 */
				<header>Submenu</header>
				<item xlink:href="http://www.163.net" target="window">Link</item>
				<item onactivate="alert('hello')">hello</item>
			</menu>
		</menu>
	</defs>
    <script type="text/javascript" ><![CDATA[

        function initDocument(evt) {
            if ( window.svgDocument == null )
                svgDocument = evt.target.ownerDocument;

			var newMenuRoot = parseXML( printNode(document.getElementById('newMenu')), 
											contextMenu);
			contextMenu.replaceChild(newMenuRoot, contextMenu.firstChild);
        }

    ]]></script>

<rect x="0" y="0" width="400" height="400" fill="skyblue" />

</svg>