避免用 css 掩码遮盖 link 上的命中区域

Question

我有一千个文本 link 被使用 css3 的掩码属性的 png 图像掩盖，我想从 link 中删除匹配被png掩码隐藏，下面是两张图片，第一张是没有遮罩的 links，第二张是带有 png 图像的遮罩 links，我的问题是所有 link 的命中区域都是活动的s 包括隐藏的 links 和掩码，有办法实现吗？

.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

有一种 "mask" 和 clip-path 的方法，问题是目前还没有得到很好的支持。 More here.

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

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

避免用 css 掩码遮盖 link 上的命中区域

Avoid hit area on link masked with css mask

css

svg

mask

masking