SVG - 超链接_SVG 菜鸟教程

<a> 元素用于创建超链接。“xlink：href” 属性用于传递 IRI （国际化资源标识符），它与 URI （统一资源标识符）相辅相成。

语法声明

以下是 <a> 元素的语法声明。我们只展示了主要属性。

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

属性

名称	描述
xlink:show	用于 XLink 感知处理器的文档目的。默认值为 new。
xlink:actuate	用于 XLink 感知处理器的文档目的。
xlink:href	被引用对象的位置。
target	当结束资源的目标可能时使用。

例

testSVG.htm

<html>
	 	<title>SVG Linking</title>
	 	<body>
	 	 		
	 	 	 <svg width="800" height="300">
	 	 	 	 	<g>
	 	 	 	 	 	 <a xlink:href="https://www.qikepu.com">	
	 	 	 	 	 	 	 	<text x="0" y="15" fill="black" >
	 	 	 	 	 	 	 	单击我加载启科普教程</text>
	 	 	 	 	 	 </a>
	 	 	 	 	</g>	
	 	 	 	 	
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="0" y="65" fill="black" >
	 	 	 	 	 	 在矩形中单击以加载启科普教程</text>
	 	 	 	 	 		
	 	 	 	 	 	 <a xlink:href="https://www.qikepu.com">	
	 	 	 	 	 	 	 	<rect x="100" y="80" width="300" height="100"
	 	 	 	 	 	 	 	style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" />	
	 	 	 	 	 	 </a>
	 	 	 	 	</g>
	 	 	 </svg>
	 	
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。单击 link 和 rectangle 查看结果。

<< SVG - 交互性 SVG - 加载器示例 >>