只能點擊svg圖片的邊緣？

Question

基本上，我遇到的問題是我有三個社交媒體圖標，這三個圖標都是可縮放矢量圖形，但是當鏈接到各自的網站時，我只能點擊SVG圖像的邊緣，換句話說我無法點擊圖像本身就是它的外部。

低品質的YouTube跌破發行的視頻：

https://www.youtube.com/watch?v=HlcT0N0If0k

任何幫助是極大的讚賞。

感謝

.icons{ 
 

 
    left:692px; 
 
    top:64px; 
 
    z-index: 1000; 
 
    position:fixed; 
 
    opacity: 0.3; 
 
    letter-spacing: 38px; 
 
    display:block; 
 

 
    } 
 

 
    .u--svg-inside { 
 
\t position: relative; 
 
\t display: inline-block; 
 

 
\t &:after { 
 
\t \t content: ""; 
 
\t \t position: absolute; 
 
\t \t top: 0; 
 
\t \t right: 0; 
 
\t \t bottom: 0; 
 
\t \t left: 0; 
 
    \t } 
 

 
    \t object { 
 
\t \t width: 100%; // Optional 
 
    \t } 
 
}

<div class="icons"> 
 

 
<a href="https://twitter.com/AndrewMcCaughey" target="_blank" class="u--svg-inside"> 
 
<object data="img/twitter.svg" style=";height:25px;" type="image/svg+xml"> <img src="twitter.png" /> </object> 
 
</a> 
 

 
<a href="https://uk.linkedin.com/in/andrew-mccaughey-160815b8" target="_blank" class="u--svg-inside"> 
 
<object data="img/linkedin.svg" style=";height:25px;" type="image/svg+xml"> <img src="linkedin.png" /> </object> 
 
</a> 
 

 
<a href="https://www.youtube.com/channel/UCVV5Bb6eflSDhLboZK-UVjw" target="_blank" class="u--svg-inside"> 
 
<object data="img/youtube.svg" style=";height:25px;" type="image/svg+xml"> <img src="youtube.png" /> </object> 
 
</a> 
 

 
</div>

Answer 1

的問題是，一個元素中的object是 「壓倒一切」 的指針/單擊事件。

爲了解決這個問題，只需添加這個CSS規則：

a object{ 
    pointer-events: none; 
} 

爲什麼只能點擊SVG圖像的邊緣？

你實際上點擊一個元素不是SVG中，一個是有點大了，這就是爲什麼你可以點擊它只能在它的邊緣。

希望這會有所幫助。

Answer 2

因爲a是一個內聯元素，幷包裹了SVG必須設置a到display:block否則display:inline-block所以它可以具有相同的height有它的孩子

Answer 3

與SVG與一個onclick處理程序中的元素出現同樣的問題。在這種情況下，上述相同的修訂工作：

svg { 
    pointer-events: none; 
}