SVG实现点击元素弹窗展示对应信息

SVG实现点击元素弹窗展示对应信息

实现思路：通过javascript给相应的元素添加按钮点击事件，通过style动态控制弹窗的显示或隐藏

示例如下：

SVG

<g>
	<text x="12.25" y="781.51" class="st11" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>10.
		<a xlink:href="javascript:Button_onclick()" id="a237">点击测试</a>
	</text>		
</g>
<g id="78945" style="display: none" data-toggle="popover" data-container="body" title="Popover Header" data-content="Some content inside the popover" data-placement="right">
	<defs>
	   <linearGradient id="gradient-test">
		   <stop offset="0%" stop-color="#DCE35B" />
		   <stop offset="100%" stop-color="#45B649" />
	   </linearGradient>
   </defs>
	<rect x="600" y="100" width="226" height="430" rx="10" ry="10" stroke="black" fill="url(#gradient-test)" stroke-width="1"/>
</g>

javascript

function Button4_onclick(){
	var style = document.getElementById("78945").style.display; 
	if(style === "none"){
		document.getElementById("78945").style.display = "block"; 
	}else if(style === "block"){
		document.getElementById("78945").style.display = "none"; 
	}
}

补充说明

data-toggle以什么事件类型触发，常用的如下：

• data-toggle=“dropdown”//下拉菜单
• data-toggle=“model” //模态框事件
• data-toggle=“tooltip”//提示框事件
• data-toggle=“tab”//标签页
• data-toggle=“collapse”//折叠
• data-toggle=“popover”//弹出框
• data-toggle=“button”//按钮事件
• data-toggle=“pill”

一般事件会作用到一个标签对象，如果是其他标签对象，就需要使用data-target指事件的标签目标。

data-container的作用是像指定的元素添加弹出框：
data-placement的作用是设定提示框显示的方向 : top, bottom, left 或 right

tips：以上所提到的属性不加也可以实现需求，嘿嘿