CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
psalv
psalv

Reputation: 21

I have an image masked by an svg, I want to make the masked part of the image unclickable

I want to create a grid of tessellated triangular images, each linking to a specific portion of the page that they are on.

I have created triangles from the images I have using an svg mask; however, when I click an area that is masked it still treats it as if the entire image is there and links me to the image that would be on the top if no mask was applied at all.

From my understanding, clip-paths act in the same way and are not supported on all browsers (specifically firefox which I am using), so this is the reason I have chosen to create the triangles through masking, however I am unsure if what I am trying to do is even possible with masking after reading it's documentation.

Here is a bootply version: http://www.bootply.com/YrbN7T2JBH You can see that the colours do not change when clicked on the appropriate spot.

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

Upvotes: 1

Views: 289

Answers (1)

psalv
psalv

Reputation: 21

I solved this issue, I was under the assumption that clipping and an svg clip-path were the same thing.

So instead of using a mask I am now using a clip path, and this is supported on 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>

Upvotes: 1

Related Questions