Skip to content

Instantly share code, notes, and snippets.

@peterhry
Created September 7, 2014 17:14
Show Gist options
  • Save peterhry/afac4906f2b330509fc7 to your computer and use it in GitHub Desktop.
Save peterhry/afac4906f2b330509fc7 to your computer and use it in GitHub Desktop.
<svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 560 1388">
<defs>
<mask id="canTopMask">
<image width="560" height="1388" xlink:href="img/can-top-alpha.png"></image>
</mask>
</defs>
<image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image>
</svg>
@julia-r
Copy link

julia-r commented Nov 5, 2014

This works very well for me. But when I uses the jquery show() and hide() functions on it, the masking does not work sometimes. Does anyone have an idea why this might be? The same happens when I add and remove a class with "display: none".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment