161

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 画像をクリック可能にするにはどうすればよいですか?

4

13 に答える 13

243

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

pointer-events: none;

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

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

于 2013-06-16T13:22:41.340 に答える
42

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

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

于 2012-10-04T16:51:22.900 に答える
34

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

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 とフォールバックで機能します。

于 2013-08-02T13:40:49.893 に答える
29

</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 の賢い人々に送られます。そこで初めて使用されました。

于 2013-10-23T22:30:11.280 に答える
23

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

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

その他の解決策については、 http://www.noupe.com/tutorial/svg-clickable-71346.htmlを参照してください。

于 2013-07-25T10:46:55.120 に答える
21

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

于 2012-07-07T10:59:30.593 に答える
3

私はこのクリーンで簡単な方法を試しましたが、すべてのブラウザーで動作するようです。svg ファイル内:

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

于 2015-08-19T10:25:07.280 に答える
-5

JavaScript でそれを行い、-属性を -element に追加onClickしますobject。

<object data="mysvg.svg" type="image/svg+xml" onClick="window.location.href='http://google.at';">
    <span>Your browser doesn't support SVG images</span>
</object>
于 2012-07-07T10:08:41.713 に答える