Html 将SVG多边形链接到锚点

我试图做一些看似相对简单的事情，但在谷歌搜索和挑剔之后，我似乎无法让它工作。 我有一个svg多边形，用于将图像剪裁成三角形。 目前，它位于一个引导列（其中包含一个标记）内，该列链接到一个锚定点。 问题是div（square）所有链接都指向锚点

但是，我有一堆这些三角形相邻，所以我需要链接到锚的区域仅限于多边形剪辑路径内的区域

我试过：

• 在clippath标记内移动a标记
• 在多边形内移动a标记（作为href）
• 为svg xlink生成此格式的href:href=“#portfolioModal3”

我怀疑是第三种选择的某种排列方式实现了我的目标

<div class="col-sm-4 portfolio-item dontwantpadding">
                    <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
                        <div class='tri-up'>
                            <svg width="100%" height="100%" viewBox="0 0 100 87">
                              <clipPath id="clipTriangleUp">
                                <polygon points="0 87,100 87,50 0"/>
                              </clipPath>
                              <image clip-path="url(#clipTriangleUp)" preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://placehold.it/1749x1510"/>
                            </svg>
                        </div>
                    </a>
                </div>

我计划将svg路径从三角形转换为圆形，因此适合圆形svg路径的东西是理想的

---

非常感谢您的帮助

尝试将a标记移动到图像内部并直接环绕图像

<a><img src="foo" /></a>

SVG可以有

我想您需要元素上的xlink:href才能将其作为锚处理。谢谢Erik。忘了换了。哦，太近了@PaulLeBeau感谢您的回复。现在，光标在鼠标上方的三角形上发生变化，但仍然不会在单击时打开锚点。有什么想法吗？再次感谢你的帮助！您是否依赖引导程序自动查找模式链接？您是否尝试过使用
$（'#portfolioModal3'）显式添加模式。模式（选项）
？好吧，看来（正如我所怀疑的）您需要自己打开模式。我已经更新了我的答案。至于你的重叠，那是个问题。恐怕没有简单的跨浏览器方法可以做到这一点。您必须将所有三角形放在同一个SVG中。谢谢您的回复！这只给了我鼠标在三角形上方的点击光标（我想要的）。但是，当我真的点击时，什么也没发生。
<div class="col-sm-4 portfolio-item dontwantpadding">
   <div class='tri-up'>
      <svg width="100%" height="100%" viewBox="0 0 100 87">
         <clipPath id="clipTriangleUp">
            <polygon points="0 87,100 87,50 0"/>
         </clipPath>
         <a id="svgtriangle"
            xlink:href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
            <image clip-path="url(#clipTriangleUp)" preserveAspectRatio="none"
                   width="100%" height="100%"
                   xlink:href="http://placehold.it/1749x1510"/>
         </a>
      </svg>
   </div>
</div>

var  triangle = document.getElementById("svgtriangle");

triangle.addEventListener('click', function(evt) {
    $('#myModal').modal('show');
});