連結

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