Question

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

我使用svg蒙版从我的图像中创建了三角形;然而，当我点击一个被遮盖的区域时，它仍然将它视为整个图像就在那里并将我链接到顶部的图像，如果根本没有应用蒙版的话。

根据我的理解，剪辑路径以相同的方式起作用并且不支持所有浏览器（特别是我正在使用的Firefox），所以这就是我选择通过屏蔽创建三角形的原因，但我不确定如果我正在尝试做的事情甚至可以在阅读它的文档后进行屏蔽。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我解决了这个问题，我假设裁剪和svg剪辑路径是相同的。

因此，我现在使用的是一个剪辑路径，而不是使用掩码，这在firefox上是受支持的：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我有一个svg掩盖的图像，我想让图像的蒙面部分不可点击

1 个答案: