将 SVG 多边形链接到锚点

Question

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

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

我试过：

移动 clippath 标签内的 a 标签
在多边形内移动 a 标签（作为 href）
为 svg 制作这种格式的 href xlink: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 路径的东西是理想的。

非常感谢任何帮助！

Answer 1

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

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

Answer 2

SVG 可以有 <a> 个元素。尝试将 link 放入 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 不会自动找到您的模式 "open" link，所以您需要向三角形添加一个点击处理程序并自己打开模式。

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

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

Demo fiddle here

将 SVG 多边形链接到锚点

Linking an SVG polygon to an anchor

html

css

anchor

svg

href