`
NistCK
  • 浏览: 38737 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

SVG自定义菜单

    博客分类:
  • SVG
阅读更多
<?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>

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    禁止鼠标右键及svg中自定义右键菜单

    在IT行业中,尤其是在Web开发领域,用户交互设计是至...而在SVG中,我们可以结合CSS和JavaScript创建自定义菜单,以提供更丰富的用户体验。这些技术广泛应用于各种Web应用程序,帮助开发者更好地控制用户与网页的互动。

    html+css仿微信底部自定义菜单

    在网页设计中,为了提供与微信应用相似的用户体验,我们可以使用HTML和CSS技术来创建一个类似于微信底部的自定义菜单。这个菜单通常包含几个固定的选项,如“首页”、“发现”、“聊天”和“我”,方便用户快速访问...

    HTML5 SVG超炫环状导航菜单动画特效

    同时,通过CSS可以自定义菜单的样式,如背景、边框、文字样式等。 这个特效在网页设计中有着广泛的应用,比如在仪表盘、数据可视化、交互式应用等方面,能够提供独特的视觉效果和高效的导航体验。通过深入理解和...

    html_css_仿微信底部自定义菜单

    在本文中,我们将深入探讨如何使用HTML和CSS来创建一个类似于微信底部的自定义菜单。这个功能对于构建具有类似微信用户体验的Web应用至关重要。我们将依次分析每个文件的作用,并讲解实现这一设计的关键技术。 首先...

    js svg全屏打开菜单动画特效.zip

    4. **SVG路径动画**:对于复杂图形,如自定义形状的菜单项,可能使用`&lt;path&gt;`元素,并通过JavaScript控制`d`属性的变化来实现动画效果。这通常需要精确计算各个阶段的路径数据。 5. **响应式设计**:为了让特效适应...

    html5+css3仿微信底部菜单(可自定义)

    3. ** Canvas 和 SVG **:虽然在这个案例中可能不直接涉及,但HTML5的Canvas和SVG元素提供了丰富的图形绘制能力,可以用于创建更复杂的动态菜单效果。 接下来,CSS3是层叠样式表的第三个主要版本,它带来了许多新的...

    仿扇形菜单动画效果

    1. **自定义View**:仿扇形菜单的核心是自定义一个View,这个View需要继承自Android的View或者 ViewGroup,以便能够绘制扇形形状并处理触摸事件。 2. **图形绘制**:使用`onDraw()`方法进行扇形的绘制,需要理解...

    HTML5 SVG应用管理菜单样式.zip

    JavaScript可以与SVG元素直接交互,提供更加丰富的用户体验,例如拖放功能、图形的实时编辑或自定义的动画序列。 综合来看,"HTML5 SVG应用管理菜单样式.zip"这个项目展示了现代Web开发中的多技术融合,包括HTML5的...

    基于SVG的js圆形菜单插件

    **基于SVG的js圆形菜单插件详解** 在现代网页设计中,交互性和视觉效果是吸引用户注意力的关键元素。本文将深入探讨一款基于SVG(Scalable Vector Graphics)的JavaScript圆形菜单插件,它能帮助开发者轻松创建出...

    SVG响应式侧边下拉菜单代码.zip

    "说明.htm"和"说明.txt"可能包含了关于如何集成和自定义这个下拉菜单的详细指南。它们可能涵盖了如何修改SVG图形、调整CSS样式,以及如何使用JavaScript进行交互逻辑的定制。 6. CSS样式: 虽然没有直接列出CSS文件...

    html5 svg+css3带左侧收缩菜单宇航员

    在“左侧收缩菜单宇航员”这个场景下,SVG可能被用来绘制宇航员的矢量图,确保无论屏幕大小如何,图像都能保持清晰。此外,SVG还可以通过JavaScript或CSS进行动画处理,增加互动性。 CSS3是层叠样式表的最新版本,...

    这是一款使用html5svg和css3制作的炫酷select下拉菜单美化效果

    在下拉菜单中,SVG可以用于制作精致的箭头图标或其他装饰元素,同时,SVG还支持内联样式和JavaScript操作,使其在动态效果中非常实用。 JavaScript在此项目中的角色主要是增强交互性和动态性。例如,当用户点击下拉...

    js+svg全屏打开菜单动画特效.zip

    在"js+svg全屏打开菜单动画特效"中,jQuery可能被用来简化JavaScript代码,使动画执行更加流畅。例如,通过$.fn.extend()可以扩展jQuery的功能,创建自定义的动画方法。 总结来说,这个压缩包提供的特效融合了...

    HTML5 SVG炫酷遮罩层动画效果

    本案例中,“HTML5 SVG炫酷遮罩层动画效果”是一个利用SVG实现的创新交互设计,特别适用于全屏菜单的展示和页面切换,提供了一种吸引用户的动态视觉体验。 首先,SVG是一种基于XML的图像格式,它的优点在于图像可以...

    html5 svg弹性动画制作网页弹性菜单动画特效

    1. **创建SVG图形元素**:使用SVG的`&lt;svg&gt;`标签来定义一个画布,然后在其中创建菜单项的图形元素,如矩形、圆形或自定义路径。这些元素可以通过`&lt;rect&gt;`, `&lt;circle&gt;`, 或 `&lt;path&gt;`标签创建。 2. **添加CSS样式**:...

    vue20的可变彩色svg图标方案

    在Vue 2.0框架中,开发者经常需要处理SVG图标,特别是那些支持颜色自定义的图标。本方案探讨了如何实现可变彩色SVG图标,使图标颜色能够根据应用的需求动态改变,以提升用户体验并增强界面设计的灵活性。下面将详细...

    HTML5 SVG圆形文字菜单特效特效代码

    这个特效代码利用了SVG的 `&lt;circle&gt;`、`&lt;text&gt;` 和 `&lt;rect&gt;` 等元素来构建圆形菜单的基础结构。`&lt;circle&gt;` 元素用于绘制圆形背景,`&lt;text&gt;` 元素用于放置文字,而 `&lt;rect&gt;` 可能是用来创建菜单项的选中状态或高亮...

    12个SVG Loading图标演示

    9. SVG图标库:除了自定义SVG图标,开发者还可以利用现有的SVG图标库,如Font Awesome、Material Icons等,它们提供了大量的预定义图标,可以快速引入并应用到项目中。 10. 性能考量:在大量使用SVG图标时,需要...

    HTML5 SVG圆形布局文字菜单导航特效.zip

    在这个案例中,自定义脚本可能用于初始化SVG图形,绑定事件监听器,以及执行与用户交互相关的动画效果。 在实际应用中,这种SVG圆形布局文字菜单导航特效可以为网站增添独特的视觉吸引力,同时提供直观的导航体验。...

    svg.zip QGIS 海图矢量符号库

    为了在QGIS中使用SVG符号,首先需要解压“svg.zip”,然后通过QGIS的“矢量风格”菜单选择“加载符号库”,导航至解压后的SVG文件目录,将整个目录加载进去。这样,SVG符号就会出现在QGIS的符号选择器中,用户就可以...

Global site tag (gtag.js) - Google Analytics