只能点击svg图片的边缘？

Question

基本上我遇到的问题是我有三个社交媒体图标，这三个图标都是可缩放矢量图形但是当链接到各自的网站时，我只能点击SVG图像的边缘，换句话说我无法单击图像本身就可以了。

以下问题的低质量Youtube视频：

bulk()

非常感谢任何帮助。

由于

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是 a 元素中的object是“覆盖”指针/点击事件。

要解决此问题，只需添加此CSS规则：

a object{
  pointer-events: none;
}

为什么只能点击SVG图像的边缘？

您实际上是点击 a 元素而不是SVG， a 稍微大一点，这就是为什么您只能点击它的边缘。< / p>

希望这有帮助。

Answer 2

因为a是一个内联元素并且正在包裹SVG，所以您必须将a设置为display:block或display:inline-block以使它具有相同的height {1}}有孩子

Answer 3

SVG的内部元素与onclick处理程序发生同样的问题。在这种情况下，上面的相同修复工作：

df$date_numbers <- rep(seq_along(unique(df$date_game)), 
                       rle(as.integer(df$date_game))$lengths)