javascript - 我有一张被 svg 遮盖的图像，我想让图像的遮盖部分不可点击

Question

我想创建一个由镶嵌三 Angular 形图像组成的网格，每个图像都链接到它们所在页面的特定部分。

我已经使用 svg mask 从图像中创建了三 Angular 形；但是，当我单击一个被蒙版的区域时，它仍然将其视为整个图像都在那里，并将我链接到如果根本没有应用蒙版的话将位于顶部的图像。

据我了解，剪辑路径的作用相同，并非所有浏览器(特别是我使用的 firefox)都支持，所以这就是我选择通过 mask 创建三 Angular 形的原因，但我不确定如果在阅读它的文档后我想做的事情甚至可以通过屏蔽来实现。

这是一个 bootply 版本:http://www.bootply.com/YrbN7T2JBH 您可以看到在适当的位置单击时颜色没有改变。

$(function jqueryEvents() {

  $('#im1').on('click', function() {
    $('html').css('background-color', "yellow");
  });

  $('#im2').on('click', function() {
    $('html').css('background-color', "red");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200" id="svg1">
  <defs>
    <mask id="mask1">
      <polygon points="100,0 0,200 200,200" fill="white" id="poly1">
      </polygon>
    </mask>

    <mask id="mask2">
      <polygon points="0,0 200,0 100,200" fill="white" id="poly2">
      </polygon>
    </mask>
  </defs>

  <image href="//google.ca" xlink:href="//placehold.it/500x500" width="200" height="200" mask="url(#mask1)" id="im1"></image>

  <image xlink:href="//placehold.it/501x501" width="200" height="200" mask="url(#mask2)" transform="translate(110, 0)" id="im2"></image>
</svg>

Answer 1

我解决了这个问题，我假设剪辑和 svg 剪辑路径是同一回事。

所以我现在使用剪辑路径而不是使用 mask ，这在 firefox 上受支持:

$(function jqueryEvents() {

  $('#im1').on('click', function() {
    $('html').css('background-color', "yellow");
  });

  $('#im2').on('click', function() {
    $('html').css('background-color', "red");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200" id="svg1">
  <defs>

    <clipPath id="clip1">
        <polygon points="100,0 0,200 200,200" fill="white" id="poly1">
    </clipPath>
    <clipPath id="clip2">
        <polygon points="0,0 200,0 100,200" fill="white" id="poly2">
    </clipPath>
</defs>

<image href="//google.ca" xlink:href="//placehold.it/500x500" width="200" height="200" clip-path="url(#clip1)" id="im1"></image>

<image xlink:href="//placehold.it/501x501" width="200" height="200" clip-path="url(#clip2)" transform="translate(110, 0)" id="im2"></image>
</svg>