Javascript 在div中放置一个d3图会阻塞其上方的链接

我试图把一个d3图形放在一个div的背景中，上面有副本和链接svg是一个简单的面积图（无皱褶），用于停用/阻止链接。我尝试过调整z索引，但运气不佳。删除svg后，一切正常

<div class="card">
    <div class="card-bg"><svg/></div>
    <div class="card-top">
      <div>
        <div class="card-header">{{circle.name }}</div>
        <div class="card-subheader">Last updated {{circle.dateCreated}</div>
      </div>
    </div>
    <div class="card-body">
        <a href="#" onclick=""><span>Link one</span></a>
        <a href="#" onclick=""><span>Link two</span></a>
        <a href="#" onclick=""><span>Link three</span></a>
        <a href="#" onclick=""><span>Link four</span></a>
        <a href="#" onclick=""><span>Link five</span></a>
    </div>
</div>

---

为

.card body

div定义一个非静态的位置。例如：

.card-body {
    z-index: 1;
    position: relative;
}

这里有一个片段：

.card{
背景色：白色；
宽度：100%；
高度：300px；
填充：20px；
边缘底部：20px；
边界半径：2px；
/*偏移-x |偏移-y |模糊半径|颜色*/
盒影：0px 0px 2px rgba（33,33,33,05）；
盒影：0px 1px 2px rgba（33,33,33,2）；
游标：默认值；
z指数：1；
位置：相对位置；
}
.卡背景{
背景色：透明；
宽度：100%；
高度：300px；
填充：20px；
边缘底部：20px；
边界半径：2px；
z指数：0；
位置：绝对位置；
}
.卡体{
z指数：1；
位置：相对位置；
}

{{circle.name}
上次更新{circle.dateCreated}

.card-body {
    z-index: 1;
    position: relative;
}