将SVG多边形链接到锚点

Question

我正在尝试做一些看似相对简单的事情，但经过大量搜索和调整，我好像无法使其工作。 我有一个SVG多边形，用于将图像剪切成三角形。 目前它位于Bootstrap列中（其中包含一个a标记），该标记链接到锚点。 问题在于，这个div（正方形）所有的链接都指向锚点。

然而，我有一堆相邻的三角形，所以我需要链接到锚点的区域仅限于在多边形剪辑路径内部的内容。

我已经尝试了：

- 将a标记移动到clippath标记内。 - 将a标记（作为href）移到多边形内部。 - 使用svg xlink：href ="#portfolioModal3"格式设置href。

我怀疑第三个选项的某些排列方式可以实现我的目标。

<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路径。

非常感谢您的帮助！

- singmotor

Answer 1

SVG可以包含<a>元素。尝试将链接放置在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>

希望您不会遇到关于Bootstrap找不到"data-toggle"的任何问题。

更新：

好的，看起来Bootstrap无法自动找到您的模态框“打开”链接，因此您需要为三角形添加一个点击处理程序，并自己打开模态框。

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

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

Demo fiddle here

- Paul LeBeau

---

我认为你需要在<a>元素上使用xlink:href，以便将其处理为锚点。 - Erik Dahlström

你是否依赖于Bootstrap自动查找模态链接？你尝试过使用$('#portfolioModal3').modal(options)显式添加模态框吗？ - Paul LeBeau

@PaulLeBeau 我猜我是吗？不过我不确定你所说的“显式添加”是什么意思，但那很可能是问题所在。该模型不存在于页面上，而是一种“弹出式”的形式。我应该在哪里添加那段代码呢？看起来像是js。 - singmotor

SVG中<a>链接需要使用"xlink:"前缀，不能删除。是的，我发布的代码片段是JS。可能Bootstrap无法在SVG中自动找到"data-toggle"属性。该JavaScript将显式添加它。至少在HTML中是这样的 - 我自己还没有在SVG上下文中尝试过。 - Paul LeBeau

好的，看起来（正如我所怀疑的）你需要自己打开模态框。我已经更新了我的答案。至于你重叠的<div>标签，那是个问题。据我所知，没有一种简单的跨浏览器方法可以解决这个问题。你需要把所有的三角形放在同一个SVG中。 - Paul LeBeau

Answer 2

尝试将a标签移动到图像内部并直接包围它。

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

- Eric

---

谢谢你回复，Eric！这确实让我在鼠标悬停三角形上时只有点击光标（这就是我想要的）。但是，当我实际点击时什么也不会发生。 - singmotor