bir html svg nesnesini de tıklanabilir bir bağlantı haline getirme

HTML sayfamda bir SVG nesnesi var ve svg görüntü tıklatıldığında kullanıcı bağlantı bağlantısına götürür bir çapa sarma.

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

Bu kod bloğunu kullandığımda, svg nesnesini tıklatmak beni google'a götürmez. IE8 <'de yayılma metni tıklanabilir.

Svg resmimi etiketleri içerecek şekilde değiştirmek istemiyorum.

Benim sorum, svg resmini nasıl tıklanabilir yapabilirim?

En kolay yol <object> kullanmamaktır. Bunun yerine bir <img> etiketi kullanın ve çapanın iyi çalışması gerekir.

Aslında, bunu çözmenin en iyi yolu ... <object> etiketinde şunu kullanın:

pointer-events: none;

Not: Reklam Engelleyici eklentisi yüklü olan kullanıcılar, fareyle üzerine gelindiğinde sağ üst köşede sekme benzeri bir [Engelle] alırlar (flash banner ile aynıdır). Bu css ayarları ile, o da gidecek.

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

Aynı sorunu yaşadım ve bunu şu şekilde çözmeyi başardım:

Nesneyi, blok veya satır içi blok olarak ayarlanmış bir öğe ile sarma

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

Ekleme <a>etiketi:

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

ve <span>etikete:

display: inline-block;

ve <object>etikete:

position: relative; 
z-index: -1

Buradaki bir örneğe bakın: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

20 numaralı yorum aracılığıyla burada bulundu https://bugzilla.mozilla.org/show_bug.cgi?id=294932

Bunun için kredi almak istiyorum ama burada bir çözüm buldum:

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

çapa için css'e aşağıdakileri ekleyin:

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>

Bağlantı svg ve yedekte çalışır.

Ayrıca SVG'nizin altına (kapanış </svg>etiketinden hemen önce ) böyle bir şey yapıştırabilirsiniz :

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

Ardından bağlantıyı uygun şekilde değiştirin. Oturduğu SVG'yi kapsamak için% 100 genişlik ve yükseklik kullandım. Tekniğin kredisi Clearleft.com'daki akıllı insanlara gidiyor - ilk kez gördüğüm yer burası.

Richard'ın çözümünün basitleştirilmesi. En azından Firefox, Safari ve Opera'da çalışır:

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

Ek çözümler için http://www.noupe.com/tutorial/svg-clickable-71346.html adresine bakın .

Bunu tüm tarayıcılarda gerçekleştirmek için @energee, @Richard ve @Feuermurmel yöntemlerinin bir kombinasyonunu kullanmanız gerekir.

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

Ekleme:

• pointer-events: none; Firefox'ta çalışmasını sağlar.
• display: block; Chrome ve Safari'de çalışmasını sağlar.
• z-index: 1; z-index: -1; IE'de de çalışmasını sağlar.

Bunu svg dosyasını da düzenleyerek çözdüm.

Aşağıdaki gibi bir tıklama olayı olan bir grup etiketi tüm svg grafiğin xml sarılmış:

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

Çözüm, nesne svg komut dosyasını destekleyen tüm tarayıcılarda çalışır. (svg'yi desteklemeyen tarayıcılar için nesne öğenizin içindeki bir img etiketini varsayılan olarak kullanırsanız, tarayıcıların gamını kapsarsınız)

Bu temiz kolay yöntemi denedim ve tüm tarayıcılarda çalışıyor gibi görünüyor. Svg dosyasının içinde:

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

Sadece kullanma <object>. İşte benim için çalışan bir çözüm <a>ve <svg>etiketler:

<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 ile yapın ve -element onClickiçin object-attribute ekleyin :

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