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

143

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?

Iancoleman
quelle

Antworten:

20

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

Erik Dahlström
quelle
1
Das img-Tag wird normalerweise dorthin verschoben, wo sich das span-Tag befindet, damit es sich ordnungsgemäß verschlechtert.
Adrian Garner
17
Ist die Idee nicht, einen SVG-Vektor anzuzeigen, kein Bild?
Luke
7
@ ErikDahlström, aber <img>mit einem Verweis auf SVG-Daten funktioniert nicht immer wie erwartet, selbst in der neuesten Version von Chrome :( stackoverflow.com/questions/15194870/…
dshap
15
Wie @energee darauf hingewiesen hat, können Sie ein <object>Tag verwenden und ein hinzufügen point-event: none;, um es anklickbar zu machen. Der Zugriff auf Ihren SVG-Quellcode bleibt erhalten, und Sie können ihn dynamisch bearbeiten.
Antoine
1
Die Verwendung von a imgist nicht immer eine Option. In meinem Fall muss ich das SVG manipulieren, was nicht richtig gemacht werden kann img, ich muss es verwenden object.
Martijn
216

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/

energee
quelle
4
Hinweis: Der IE unterstützt Zeigerereignisse für reguläre Elemente erst in IE 11, unterstützt sie jedoch bereits in SVG. Siehe caniuse.com/pointer-events
Webdesserts
9
Ein Nachteil dieser Lösung (und der von noelmcg auch) ist, dass diese Regeln nicht mehr funktionieren, wenn Ihre SVG-Datei CSS-Regeln mit einem: hover-Selektor enthält. Die von Ben Frain vorgeschlagene Lösung hat dieses Problem nicht.
MathieuLescure
6
Diese Antwort sollte genehmigt werden. Die Verwendung imgmit svg macht es dann unbrauchbar, interne SVG-Stile zu ändern.
Cadavre
3
Dies muss die genehmigte Antwort sein! Wirklich schön, danke
Daniel Broughan
5
Gute Antwort. Ich habe meine damit in der globalen CSS universell gemacht. object [type * = "svg"] {Zeigerereignisse: keine}
Gregor Macgregor
39

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

Richard
quelle
1
Entschuldigung, vergaß die Anzeige: Inline-Block / Block-Element, um das Objekt zu wickeln
Richard
1
Beste Lösung hier!
Baldráni
Dies ist die beste Lösung für dieses Problem und funktioniert in allen Browsern
Kalpesh Popat
1
Wenn das Bild transparent ist, erscheinen diese Bits nicht anklickbar
sobelito
Dies funktionierte für mich, ich musste auch Höhe hinzufügen: 100% zu den a und span Elementen in meiner Situation
sk03
32

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.

noelmcg
quelle
2
Dies ist meiner Meinung nach die einfachste und am meisten unterstützte Lösung
Type-Style
3
Dies hat immer noch ein Problem: SVG-Zeigerereignisse (Animationen) funktionieren nicht mehr (Mouseover, Mouseout, Klick)! Genau wie bei der Verwendung von
Zeigerereignissen
26

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.

Ben Frain
quelle
2
Ich habe CSS-Stile mit einem: Hover-Selektor, der in meine SVG-Datei eingebettet ist. Dies ist die einzige Lösung, die den Stil nicht deaktiviert.
MathieuLescure
21

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 .

Feuermurmel
quelle
3
Vielen Dank, ich musste das Display auf blockoder inline-blockauf dem Elternteil einstellen <a>.
Element119
Guter Link: noupe.com/inspiration/tutorials-inspiration/… hat Vor- und Nachteile für jede Lösung.
Serge Stroobandt
inline-blockIn einigen Fällen musste ich es auch verwenden , aber blockin anderen Fällen schien es gut zu funktionieren. Ich denke, es hängt von den umschließenden Blöcken ab ...
Gwyneth Llewelyn
9

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.
ChristopherStrydom
quelle
@janaspage Ich bin nicht sicher ... Ich habe es nicht auf IE 10 ausprobiert. Lassen Sie mich wissen, ob es funktioniert :)
ChristopherStrydom
@jaepage Es sollte keine Rolle spielen, da objectes sich jetzt in einem niedrigeren Stapelkontext (unter) befindet als der übergeordnete Kontext.
Jason T Featheringham
funktioniert das auf einem iPhone / Handy? nicht für mich. nicht klickbar / tippbar
bafromca
3

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

Bruce Pezzlo
quelle
Haben Sie festgestellt, dass das Hinzufügen des Onclicks zum äußeren <svg>Element und das Nicht- Umschließen überhaupt nicht funktioniert hat?
Robert Longson
1
Sie können auch die Ereignisse des Root-SVG-Elements verwenden. Zusätzlich zu Onclick-Ereignissen verwende ich onmouseout, ontouchstart, ontouchend usw. und für das Root-SVG-Element verwende ich häufig das Onload-Ereignis. Die unten stehende Lösung von Ben Frain umfasst das Zeichnen eines zusätzlichen Deckungsobjekts (eines Rechtecks) zum Erfassen der Klickereignisse. Daher habe ich diese Lösung angeboten, bei der Ereignisse auf den Zeichenelementen selbst angezeigt werden, ohne dass eine transparente Abdeckung erstellt werden muss, um ein Klickereignis zu erhalten. Besonders hilfreich, wenn Sie kein anderes Element zeichnen möchten oder wenn die Ereignisse spezifisch für die vorhandene Form und nicht für ein Rechteck sein sollen.
Bruce Pezzlo
3

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>
  

Dario Rigon
quelle
Der folgende 'xlink'-Namespace muss dem svg-Element hinzugefügt werden, damit dies funktioniert: xmlns: xlink = " w3.org/1999/xlink "
Mere Development
Keine der anderen Lösungen hat bei mir funktioniert, aber diese hat funktioniert, puh, danke!
ByteMyPixel
Obwohl ich normalerweise keine Bedenken habe, eine SVG-Datei direkt zu ändern, verwende ich in meinem Szenario dieselbe SVG für mehrere verschiedene Links - was bedeutet, dass ich theoretisch für jede eine andere SVG erstellen müsste. Alternativ könnte ich natürlich das Grafikbit inline in das <svg> -Tag einfügen, aber ich hasse doppelten Code (obwohl die tatsächliche SVG, die ich habe, klein ist ...)
Gwyneth Llewelyn
0

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>
Ege Hurturk
quelle
Übrigens benutze ich Rückenwind CSS.
Ege Hurturk
-5

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>
Stefan Fandler
quelle
Ich habe dies sowohl mit als auch ohne die umgebenden <a> -Tags versucht, und ich kann dies nicht zum Laufen bringen. Ich habe es in FF und Chrome unter Linux versucht. In welchem ​​Browser haben Sie das ausprobiert?
Iancoleman
6
Es wäre großartig, wenn Sie es versuchen und bestätigen könnten, dass es funktioniert, damit andere, die dies lesen, auf Ihre Antwort vertrauen können. "Es muss funktionieren" ist theoretisch in Ordnung, aber für mich muss es in der Praxis funktionieren.
Iancoleman
Ich habe es gerade unter Chrome 45 unter Windows versucht und es scheint gut zu funktionieren. Ich habe onClick direkt zu einem SVG-Tag ohne Wrapping-Anker hinzugefügt. Es wäre schön, wenn die Abstimmungen erklären würden, warum.
Chase