Movatterモバイル変換


[0]ホーム

URL:


  1. 開発者向けのウェブ技術
  2. SVG
  3. ガイド
  4. リンク

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。

View in EnglishAlways switch to English

リンク

SVG の<a> 要素のtarget 属性は、 Mozilla Firefox 1.5 では動作しません。 SVG 文書はタグを使用して親の HTML 文書に埋め込まれます。

page1.html:

html
<html lang="en">  <body>    <p>これは SVG ボタンです</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">    <g>      <!-- ここにボタンのグラフィック要素 -->    </g>  </a></svg>

仕様書では、ブラウザーはボタンのグラフィックがクリックされたとき、 HTML 文書 page2.html へ移動します。しかし、target は Firefox 1.5 における SVG の<a> 要素の Mozilla の実装では動作しません。(この問題は Firefox 2.0 で修正されます。)

いずれにせよ、 Moz SVG の結果としての動作は、 SVG ボタンがあったフレームに page2.html が読み込まれることになります(つまり、 page2.html が page1.html の中にある 100x50 ピクセルのフレームに埋め込まれることになります)。

これを回避するには、少し醜い JavaScript ハッキングが必要です。

button.svg:

xml
<?xml version="1.1" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg">  <g cursor="pointer">    <!-- ここにボタンのグラフィック要素 -->  </g></svg>

このソリューションの使用例については、www.codedread.com を参照してください。

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp