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画像をクリック可能にすることができますか？

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

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

pointer-events: none;

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

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

私は同じ問題を抱えていて、これを何とか解決しました：

要素をブロックまたはインラインブロックに設定してオブジェクトをラップする

<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

コメントhttps://bugzilla.mozilla.org/show_bug.cgi?id=294932で見つかりました

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

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

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の賢い人々にあります。

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

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

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

すべてのブラウザでこれを実現するには、@ 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でも機能します。

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

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

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

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

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

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

使用しないでください<object>。これが<a>と<svg>タグで私のために働いた解決策です：

<a href="<your-link>" class="mr-5 p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-red-700 transition duration-150 ease-in-out" aria-label="Notifications">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" 
    height="30"><path class="heroicon-ui" fill="#fff" d="M17 16a3 3 0 1 1-2.83 
    2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 
    1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3- 
   6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
    </svg>
</a>

それをjavascriptで行い、- 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>