Skip to content

Instantly share code, notes, and snippets.

@karls

karls/svg-1.html

Created March 12, 2012 15:06
Show Gist options
  • Save karls/2022521 to your computer and use it in GitHub Desktop.
Save karls/2022521 to your computer and use it in GitHub Desktop.
Download ZIP
Another way to do masking with SVG
Raw
svg-1.html
<!doctype html>
<html>
<head>
<title>SVG Test</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400" viewBox="0 0 400 400">
<defs>
<!--
This <defs> thing defines some "variables", referenced by the value of id
Create a clip path. This is the exact same shape as in your application. I've
just copied and pasted it.
-->
<clipPath id="shieldShape">
<path d="M 0 0 V 150 C 0 340 200 400 200 400 C 200 400 400 340 400 150 V 0 Z" />
</clipPath>
</defs>
<!--
Create a group of stuff, in the context of Shield app, this can be the base
of the actual shield, containing a number of rectangles, pictures (of bees)
and such. This is where you would dynamically generate the components of
a shield.
Apply clip to the group of components
-->
<g id="shieldComponents" style="clip-path: url(#shieldShape);">
<rect height="400" width="400" x="0" y="0" fill="purple"></rect>
<rect height="135" width="400" x="0" y="0" fill="gold"></rect>
<image xlink:href="http://www.heraldicclipart.com/catalog/bee-proper.bmp"
height="71.1111" width="63.9488" x="68.0256" y="151.111"></image>
<image xlink:href="http://www.heraldicclipart.com/catalog/bee-proper.bmp"
height="71.1111" width="63.9488" x="268.026" y="151.111"></image>
<image xlink:href="http://www.heraldicclipart.com/catalog/bee-proper.bmp"
height="71.1111" width="63.9488" x="168.026" y="257.778"></image>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment