Skip to content

Instantly share code, notes, and snippets.

@BrendonKoz

BrendonKoz/svg_mask.html

Created June 26, 2018 15:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BrendonKoz/3f16f83ec4b02432e20fbc8515f65dec to your computer and use it in GitHub Desktop.
Save BrendonKoz/3f16f83ec4b02432e20fbc8515f65dec to your computer and use it in GitHub Desktop.
Download ZIP
SVG Masking Example with multi-element mask
Raw
svg_mask.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SVG Masking Test</title>
<style>
body {
background-color: #F0F;
}
#circle {
fill:#649A44;
}
#triplet {
fill:#fff;
stroke:0;
}
#mask-triplet {
opacity:1;
}
/* The important part */
#symbol {
mask: url(#mask1);
}
/* remove the mask (or set opacity 0) to allow fill color */
</style>
</head>
<body>
<!-- Visible masks are white, invisible masks are black, alpha transparency is set for anything inbetween -->
<!-- Attempting to make the "#triplet" group transparent via filter -->
<svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" enable-background="new" id="test">
<defs>
<mask id="mask1" x="0" y="0" width="68" height="68">
<circle id="mask-circle" cx="34" cy="34" r="34" fill="#ffffff"/>
<g id="mask-triplet">
<ellipse cx="34" cy="28" rx="5.5" ry="22" fill="#000000"/>
<ellipse cx="20.1" cy="31.6" rx="4.1" ry="16.5" transform="rotate(-19.473 20.11 31.628)" fill="#000000"/>
<ellipse cx="47.9" cy="31.6" rx="4.1" ry="16.5" transform="rotate(-160.527 47.887 31.632)" fill="#000000"/>
</g>
</mask>
</defs>
<g id="symbol">
<circle id="circle" cx="34" cy="34" r="34" fill="#47BFB1"/>
<g id="triplet" fill="lightblue">
<ellipse cx="34" cy="28" rx="5.5" ry="22"/>
<ellipse cx="20.1" cy="31.6" rx="4.1" ry="16.5" transform="rotate(-19.473 20.11 31.628)"/>
<ellipse cx="47.9" cy="31.6" rx="4.1" ry="16.5" transform="rotate(-160.527 47.887 31.632)"/>
</g>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment