我正在尝试做一些看似相对简单的事情,但经过多次谷歌搜索和修改后,我似乎无法让它发挥作用。 我有一个 svg 多边形,用于将图像剪辑成三 Angular 形。 目前它在一个引导列中,(其中有一个标签)链接到一个 anchor 。 这个问题是 div(square) 所有链接到 anchor 。
但是,我有一堆这样的三 Angular 形相邻,所以我需要链接到 anchor 的区域仅限于多边形剪辑路径内的区域。
我试过:
- 将 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 路径从三 Angular 形过渡到圆形,因此适合圆形 svg 路径的东西是理想的。
非常感谢任何帮助!
最佳答案
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 不会自动找到您的模态“打开”链接,因此您需要向三 Angular 形添加一个点击处理程序并自己打开模态。
var triangle = document.getElementById("svgtriangle");
triangle.addEventListener('click', function(evt) {
$('#myModal').modal('show');
});
关于html - 将 SVG 多边形链接到 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28336421/