将 SVG 多边形链接到锚点答案

【问题标题】：Linking an SVG polygon to an anchor将 SVG 多边形链接到锚点
【发布时间】：2015-04-04 20:42:35
【问题描述】：

我正在尝试做一些看似相对简单的事情，但经过多次谷歌搜索和修饰后，我似乎无法使其工作。我有一个 svg 多边形，用于将图像剪辑成三角形。目前它在一个引导列中，（其中带有一个标签）链接到一个锚点。这个问题是 div(square) 所有链接到锚点。

但是，我有一堆相邻的三角形，所以我需要将链接到锚点的区域限制在多边形剪辑路径内。

我试过了：

在clippath标签内移动a标签
在多边形内移动 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 路径的东西是理想的。

非常感谢任何帮助！

【问题讨论】：

标签： html css svg anchor href

【解决方案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

【讨论】：

我认为您需要在元素上使用 xlink:href 才能将其作为锚点处理。
谢谢埃里克。忘记改了。
太近了！ @PaulLeBeau 感谢您的回复。现在光标在三角形鼠标悬停时发生变化，但仍然没有在单击时打开锚点。有什么想法吗？再次感谢您的帮助！
您是否依赖 Bootstrap 自动查找模态链接？您是否尝试过使用 $('#portfolioModal3').modal(options) 显式添加模式？
好吧，看来（我怀疑）您需要自己打开模式。我已经更新了我的答案。至于你重叠的<div>s 这是个问题。 AFAIK 没有简单的跨浏览器方法可以做到这一点。您将不得不将所有三角形放在同一个 SVG 中。

【解决方案2】：

尝试仅将 a 标签移动到图片内部并直接围绕图片。

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

【讨论】：

感谢 Eric 的回复！这确实给了我鼠标悬停在三角形上的点击光标（我想要的）。但是，当我真正点击时，什么也没有发生。