基本上我遇到的问题是我有三个社交媒体图标,这三个都是可缩放矢量图形但是当链接到各自的网站时,我只能点击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 {
position: relative;
display: inline-block;
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
object {
width: 100%; // Optional
}
}Run Code Online (Sandbox Code Playgroud)
<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" …Run Code Online (Sandbox Code Playgroud)