Question

我有一千个文本链接被pss图像使用css3的mask属性屏蔽，我想从png mask隐藏的链接中删除命中，下面是两个图像，第一个是没有屏蔽的链接，第二个是带有png图像的屏蔽链接，我的问题是所有链接的命中区域都包含带掩码的隐藏链接，还有一种方法可以实现这个吗？

enter image description here

.container {
  -webkit-mask: url(../images/mask.png) top left;
  mask: url(../images/mask.png);
}

.tweets {
  width: 400px;
  height: 400px;
  -webkit-mask: url("http://asesoriait.net/images/mask.png") top left;
  mask: url("http://asesoriait.net/images/mask.png") top left;

}

<div class="tweets masonry js-masonry hidden" id="tweets">	
  <a class="txtExtra" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>							
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>
  <a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>							
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>
  <a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>							
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>
  </div>

Answer 1

CSS屏蔽仍然是一个实验性功能。我不知道如何解决您的问题，只能提供解决方法。获得所需结果的一种可能方法是使用带有clipPath element的svg剪辑链接。

示例：

svg{
    width:90%;
    border:1px solid red;
}

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 50">
    <defs>
        <clipPath id="clip">
            <path d="M50 10 C80 80 80 80 50 50 C 10 10 10 10 50 0z"/>
        </clipPath>
    </defs>
    <g clip-path="url(#clip)" font-size="20">        
        <a xlink:href="#"><text x="0" y="5">@</text></a>
        <a xlink:href="#"><text x="20" y="5">@</text></a>
        <a xlink:href="#"><text x="40" y="5">@</text></a>
        <a xlink:href="#"><text x="60" y="5">@</text></a>
        <a xlink:href="#"><text x="80" y="5">@</text></a>
        <a xlink:href="#"><text x="0" y="25">@</text></a>
        <a xlink:href="#"><text x="20" y="25">@</text></a>
        <a xlink:href="#"><text x="40" y="25">@</text></a>
        <a xlink:href="#"><text x="60" y="25">@</text></a>
        <a xlink:href="#"><text x="80" y="25">@</text></a>
    </g>
</svg>

Answer 2

有一种方法来掩盖＆＃34;使用clip-path，问题是目前还没有得到很好的支持。 More here

＆＃13;

.tweets {
  width: 400px;
  height: 400px;
  -webkit-clip-path: circle(20.0% at 50% 50%);
  clip-path: circle(20.0% at 50% 50%);
}

＆＃13;

<div class="tweets masonry js-masonry hidden" id="tweets"> <a class="txtExtra" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>	
  <a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>
  <a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>	
  <a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>
  <a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>	
  <a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>	

</div>

＆＃13;

避免使用css掩码掩盖的链接上的命中区域

2 个答案: