基本上我遇到的问题是我有三个社交媒体图标,这三个图标都是可缩放矢量图形,但是当链接到相应的网站时,我只能单击 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
}
}
<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>
最佳答案
问题是 a 元素中的 object
正在“覆盖”指针/点击事件。
要解决此问题,只需添加此 CSS 规则:
a object{
pointer-events: none;
}
为什么只能点击SVG图片的边缘?
您实际上是在点击 a 元素而不是 SVG,a 稍微大一点,这就是为什么您只能点击它的边缘。
希望这对您有所帮助。
关于css - 只能单击 svg 图像的边缘吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35367445/