--- title: Linking slug: Web/SVG/Linking translation_of: Web/SVG/Linking ---
page1.html:
<html> <body> <p>This is a SVG button:</p> <object width="100" height="50" type="image/svg+xml" data="button.svg"/> </body> </html>
button.svg:
<?xml version="1.1" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg>
规范规定,当单击按钮图形时,浏览器应导航到HTML document page2.HTML。但是,target不能与Mozilla在Firefox 1.5中实现的SVG<a>元素协同工作。(问题将在Firefox2.0中解决。)
无论如何,Moz SVG中的结果行为是page2.html将被加载到SVG按钮所在的帧中(即,您现在将page2.html嵌入到page1.html中的100x50像素帧中)。
要解决这个问题,需要一点难看的JavaScript编程:
button.svg:
<?xml version="1.1" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <g onclick="top.document.href='page2.html'" cursor="pointer"> <!-- button graphical elements here --> </g> </svg>
有关此解决方案在工作中的示例,请参见www.codedeard.com。