Question

我正在尝试做一些看似相对简单的事情，但经过大量的谷歌搜索和噱头，我似乎无法使其发挥作用。我有一个svg多边形，我用它来将图像剪切成三角形。目前它位于一个引导列中（带有一个标记）链接到一个锚点。这个问题是div（square）都链接到锚点。

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

我试过了：

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

非常感谢任何帮助！

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似乎没有找到你的模态＆＃34; open＆＃34;自动链接，所以你需要在三角形中添加一个点击处理程序并自己打开模态。

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

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

Demo fiddle here

Answer 2

尝试仅在图像中移动标签并直接围绕图像。

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

将SVG多边形链接到锚点

2 个答案: