Skip to content

Instantly share code, notes, and snippets.

@endash

endash/index.html

Last active December 3, 2020 02:54
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 endash/c132c61121a9347011a599263f35190d to your computer and use it in GitHub Desktop.
Save endash/c132c61121a9347011a599263f35190d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>mask-image bug demo</title>
<style>
div {
width: 24px;
height: 24px;
}
.foo {
-webkit-mask-image: url(https://gist.githubusercontent.com/endash/c132c61121a9347011a599263f35190d/raw/ad92ab75ab346db0f5ef2d71488cebcea6765426/sprite.svg#foo-usage);
-webkit-mask-size: 24px 24px;
background-color: black;
}
.bar {
-webkit-mask-image: url(https://gist.githubusercontent.com/endash/c132c61121a9347011a599263f35190d/raw/ad92ab75ab346db0f5ef2d71488cebcea6765426/sprite.svg#bar-usage);
-webkit-mask-size: 24px 24px;
background-color: black;
}
</style>
</head>
<body>
<div class="foo"></div>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
sprite.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.sprite-symbol-usage {display: none;}
.sprite-symbol-usage:target {display: block;}
</style>
<defs>
<symbol viewBox="0 0 24 24" id="foo">
<circle cx="0" cy="12" r="12"></circle>
</symbol>
<symbol viewBox="0 0 24 24" id="bar">
<circle cx="24" cy="12" r="12"></circle>
</symbol>
</defs>
<use id="foo-usage" xlink:href="#foo" class="sprite-symbol-usage" />
<use id="bar-usage" xlink:href="#bar" class="sprite-symbol-usage" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment