Machen Sie aus einem HTML-SVG-Objekt auch einen anklickbaren Link

Ich habe ein SVG-Objekt in meiner HTML-Seite und verpacke es in einen Anker. Wenn Sie auf das SVG-Bild klicken, gelangt der Benutzer zum Ankerlink.

<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>

Wenn ich diesen Codeblock verwende, kann ich durch Klicken auf das SVG-Objekt nicht zu Google wechseln. In IE8 <kann der Bereichstext angeklickt werden.

Ich möchte mein SVG-Bild nicht so ändern, dass es Tags enthält.

Meine Frage ist, wie kann ich das SVG-Bild anklickbar machen?

Am einfachsten ist es, <Objekt> nicht zu verwenden. Verwenden Sie stattdessen ein <img> -Tag und der Anker sollte einwandfrei funktionieren.

Der beste Weg, dies zu lösen, ist ... Verwenden Sie auf dem <object> -Tag:

pointer-events: none;

Hinweis: Benutzer, auf denen das Ad Blocker-Plugin installiert ist, erhalten beim Bewegen des Mauszeigers in der oberen rechten Ecke einen tabulatorähnlichen [Block] (wie bei einem Flash-Banner). Durch die Einstellung dieses CSS wird auch das verschwinden.

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

Ich hatte das gleiche Problem und konnte es lösen durch:

Umschließen des Objekts mit einem Element, das auf Block oder Inline-Block gesetzt ist

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

Zum <a>Tag hinzufügen:

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

und zum <span>Tag:

display: inline-block;

und zum <object>Tag:

position: relative; 
z-index: -1

Ein Beispiel finden Sie hier: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

Gefunden über Kommentar 20 hier https://bugzilla.mozilla.org/show_bug.cgi?id=294932

Ich würde das gerne würdigen, aber ich habe hier eine Lösung gefunden:

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

Fügen Sie dem CSS für den Anker Folgendes hinzu:

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>

Link arbeitet am SVG und am Fallback.

Sie können auch so etwas unten in Ihre SVG-Datei einfügen (direkt vor dem schließenden </svg>Tag):

<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>

Dann ändern Sie einfach den Link entsprechend. Ich habe 100% Breite und Höhe verwendet, um das SVG abzudecken, in dem es sich befindet. Der Verdienst für die Technik geht an die intelligenten Leute bei Clearleft.com - dort habe ich sie zum ersten Mal verwendet gesehen.

Eine Vereinfachung von Richards Lösung. Funktioniert zumindest in Firefox, Safari und Opera:

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

Weitere Lösungen finden Sie unter http://www.noupe.com/tutorial/svg-clickable-71346.html .

Um dies in allen Browsern zu erreichen, müssen Sie eine Kombination der Methoden @energee, @Richard und @Feuermurmel verwenden.

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

Hinzufügen:

• pointer-events: none; macht es funktioniert in Firefox.
• display: block; bringt es in Chrome und Safari zum Laufen.
• z-index: 1; z-index: -1; Damit funktioniert es auch im IE.

Ich habe dies behoben, indem ich auch die SVG-Datei bearbeitet habe.

Ich habe die XML-Datei der gesamten SVG-Grafik in ein Gruppen-Tag eingeschlossen, das ein Klickereignis wie folgt enthält:

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

Die Lösung funktioniert in allen Browsern, die das Objekt-SVG-Skript unterstützen. (Standardmäßig ein IMG-Tag in Ihrem Objektelement für Browser, die SVG nicht unterstützen, und Sie decken die Bandbreite der Browser ab.)

Ich habe diese saubere, einfache Methode ausprobiert und scheint in allen Browsern zu funktionieren. In der SVG-Datei:

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

Nur nicht benutzen <object>. Hier ist eine Lösung, die für mich mit <a>und <svg>Tags funktioniert hat :

<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>

Mach es mit Javascript und füge onClickdeinem object-element ein -attribute hinzu :

<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>