web-dev-qa-db-ja.com

html svgオブジェクトもクリック可能なリンクにする

HTMLページにSVGオブジェクトがあり、それをアンカーでラップしているため、svg画像をクリックすると、ユーザーはアンカーリンクに移動します。

<a href="http://www.google.com/">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn't support SVG images</span>
    </object>
</a>

このコードブロックを使用すると、svgオブジェクトをクリックしてもGoogleに移動しません。 IE8 <では、スパンテキストはクリック可能です。

タグを含むようにsvg画像を変更したくありません。

私の質問は、どうすればsvg画像をクリック可能にすることができますか？

htmlobjectsvganchor
126
iancoleman

最も簡単な方法は、<object>を使用しないことです。代わりに<img>タグを使用すると、アンカーは正常に機能するはずです。

22
Erik Dahlström

実際、これを解決する最良の方法は... <object>タグで、次を使用します：

pointer-events: none;

注：Ad Blockerプラグインをインストールしているユーザーは、ホバリングすると右上隅にタブのような[ブロック]が表示されます（Flashバナーと同じ）。このCSSを設定することで、それもなくなります。

http://jsfiddle.net/energee/UL9k9/

198
energee

私は同じ問題を抱えていて、次の方法でこれを解決できました。

Blockまたはinline-blockに設定された要素でオブジェクトをラップする

<a>
    <span>
        <object></object>
    </span>
</a>

<a>タグへの追加：

display: inline-block;
position: relative; 
z-index: 1;

そして<span>タグに：

display: inline-block;

そして<object>タグに：

position: relative; 
z-index: -1

こちらの例をご覧ください： http://dabblet.com/Gist/d6ebc6c14bd68a4b06a6

コメント20でここにあります https://bugzilla.mozilla.org/show_bug.cgi?id=294932

34
Richard

これを信用したいのですが、私はここで解決策を見つけました：

https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable

アンカーのcssに次を追加します。

a.svg {
  position: relative;
  display: inline-block; 
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}


<a href="#" class="svg">
  <object data="random.svg" type="image/svg+xml">
    <img src="random.jpg" />
  </object>
</a>

リンクはsvgおよびフォールバックで機能します。

31
noelmcg

また、SVGの下部（終了</svg>タグの直前）に次のようなものを貼り付けることもできます。

<a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top">
    <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
</a>

次に、それに合わせてリンクを修正します。私は100％の幅と高さを使ってSVGをカバーしました。この技術の功績はClearleft.comの賢い人たちにかかっています。

21
Ben Frain

リチャードのソリューションの簡素化。少なくともFirefox、Safari、およびOperaで動作します。

<a href="..." style="display: block;">
    <object data="..." style="pointer-events: none;" />
</a>

追加のソリューションについては、 http://www.noupe.com/tutorial/svg-clickable-71346.html を参照してください。

18
Feuermurmel

すべてのブラウザでこれを実現するには、@ energee、@ Richard、@ Feuermurmelメソッドの組み合わせを使用する必要があります。

<a href="" style="display: block; z-index: 1;">
    <object data="" style="z-index: -1; pointer-events: none;" />
</a>

追加：

  • pointer-events: none;はFirefoxで動作するようにします。
  • display: block;はChromeとSafariで動作します。
  • z-index: 1; z-index: -1;はIEでも動作します。
9
ChristopherStrydom

Svgファイルも編集して、これを解決しました。

次のように、クリックイベントを持つグループタグでsvgグラフィック全体のxmlをラップしました。

<svg .....>
<g id="thefix" onclick="window.top.location.href='http://www.google.com/';">
 <!-- ... your graphics ... -->
</g>
</svg>

ソリューションは、オブジェクトsvgスクリプトをサポートするすべてのブラウザーで機能します。 （デフォルトでは、svgをサポートしないブラウザーのオブジェクト要素内にimgタグがあり、ブラウザーの全範囲をカバーします）

3
Bruce Pezzlo

私はこのきれいで簡単な方法を試してみましたが、すべてのブラウザで動作するようです。 svgファイル内：

<svg>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
  
<!--your graphic-->
  
</a>
</svg>
2
Dario Rigon