链接
SVG <a>
元素上的 target
属性在 Mozilla Firefox 1.5 中不起作用。当 SVG 文档使用 <embed>
标签嵌入到父 HTML 文档中时
page1.html
html
<html lang="en">
<body>
<p>This is a SVG button:</p>
<object
width="100"
height="50"
type="image/svg+xml"
data="button.svg"></object>
</body>
</html>
button.svg
xml
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<a href="page2.html" target="_top">
<g>
<!-- button graphical elements here -->
</g>
</a>
</svg>
规范规定,当点击按钮图形时,浏览器应该导航到 HTML 文档 page2.html。然而,在 Mozilla 对 Firefox 1.5 中 SVG <a>
元素的实现中,target
不起作用。(该问题将在 Firefox 2.0 中修复。)
总之,在 Moz SVG 中的结果行为是 page2.html 将会被加载到 SVG 按钮所在的框架中(也就是说,您现在将在 page1.html 中的一个 100x50 像素的框架内嵌入 page2.html)。
要解决此问题,需要一些笨拙的 JavaScript 技巧。
button.svg
xml
<?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.codedread.com。