我有一个被SVG掩盖的图像，我想使图像的蒙版部分无法拼写

Question

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

我已经从使用SVG掩码的图像中创建了三角形；但是，当我单击一个被掩盖的区域时，它仍然将其视为整个图像都在那里，并将我链接到如果根本没有施加掩码的话，将我链接到顶部。

从我的理解中，剪辑路径以相同的方式起作用，并且不支持所有浏览器（特别是我正在使用的Firefox），因此这就是我选择通过掩盖创建三角形的原因，但是我不确定如果我想做的是在阅读文档后甚至可以通过掩盖。

这是一个引导版本：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剪辑路径是同一件事。

因此，我现在使用夹子路径而不是使用掩码，并且在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>