将SVG多边形链接到锚点

Question

我正在尝试做一些看似相对简单的事情，但是经过大量的搜索和挑剔之后，我似乎无法使其工作。我有一个svg多边形，用于将图像裁剪成三角形。当前，它在引导列（包含标签）内，该列链接到锚点。这样做的问题是div（square）全部链接到锚点。

但是，我有一堆这些三角形邻接，因此我需要链接到锚点的区域被限制为仅包含多边形剪辑路径中的内容。

我试过了：

• 将标签移动到clippath标签内
• 在多边形内移动标签（作为href）
• 以这种格式为href制作svg 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

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');
});

演示小提琴在这里