使此形状（附加图像）完全起作用的最佳方法是什么？

Question

我的html / css / svg形状有问题。我不知道如何做到这一点。

如您在所附图像中看到的，我有一个圆圈，我想用一些图像填充它。此形状的顶部和底部均为圆形。我曾尝试用clip-path来做到这一点，但这不是我期望的。是否有解决方案可以使此形状像div一样完全起作用？ （可单击，可悬停，视为图像）我必须放置多个形状才能制成一个完整的圆圈/环，并且不希望它像纸牌屋一样崩溃。复制并旋转是一个好方法吗？

我已经尝试在svg中构建它，然后复制并旋转x次。但是svg区域是正方形的，然后对象将彼此重叠（就像我图像上的B一样）。我不知道这样做是否是个好主意。

<div id="mainContainer">
<svg class='crop-shapes'>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="400">
            <image xlink:href="https://oralcancerfoundation.org/wp-content/uploads/2016/03/people.jpg" x="-30" y="-50"
                width="400" height="267" />
        </pattern>
    </defs>
  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
    <path d="M 15 100 L 0 100 Q 85 150 165 100 L 135 0 Q 85 25 35 0 L 0 100" fill="url(#img1)"/>
  </a> 
</svg>

</div>

 <style>
  #mainContainer{
    height:800px;
    width:800px;
    border:1px solid blue;
  }
  svg{
    height:125px;
    width:165px;
    border:1px solid red;
    margin:0 auto;
  }