/object">

Linking

The 'target' attribute on the SVG 'a' element doesn't work in Mozilla Firefox 1.5. When SVG documents are embedded within a parent HTML document using the <object> tag: </object>

page1.html: <pre> <html><body>

  <p>This is a SVG button:</p>
  <object width="100" height="50" type="image/svg+xml" data="button.svg"/>

</body></html> </pre>

button.svg: <pre> <?xml version="1.1" ?> <svg...>

  <a xlink:href="page2.html" target="_top">
     <g>
     <!-- button graphical elements here -->
     </g>
  </a>

</svg> </pre>

The specification says that the browser should navigate to the HTML document page2.html when the button graphics are clicked. However, 'target' does not work with Mozilla's implementation of the SVG 'a' element in Firefox 1.5. (The problem will be fixed in Firefox 2.0.)

Anyway, the resultant behavior in Moz SVG is that page2.html will be loaded into the frame where the SVG button was (i.e. you would now have page2.html embedded inside a 100x50 pixel frame inside page1.html).

To get around this, requires a little ugly JavaScript hacking:

button.svg: <pre> <?xml version="1.1" ?> <svg...>

     <g onclick="top.document.href='page2.html'" cursor="pointer">
     <!-- button graphical elements here -->
     </g>

</svg> </pre>

== Example ==

For an example of this solution at work see www.codedread.com.

Document Tags and Contributors

Tags: 
 Contributors to this page: Jeremie, Kohei, Jonathan_Watt
 Last updated by: Jeremie,