Skip to content

Instantly share code, notes, and snippets.

@karls

karls/svg.html

Created March 12, 2012 13:48
Show Gist options
  • Save karls/2022034 to your computer and use it in GitHub Desktop.
Save karls/2022034 to your computer and use it in GitHub Desktop.
Download ZIP
SVG clipping example
Raw
svg.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">
<!--
This <defs> thing defines some "variables", referenced by the value of id
-->
<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.
-->
<g id="shieldComponents">
<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>
<!--
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>
<!--
<use> allows us to use the variables defined in the <defs> context and do
funky jazz.
Use the #shieldComponents (group of stuff) with the #shieldShape clip applied
-->
<use xlink:href="#shieldComponents" style="clip-path: url(#shieldShape);" />
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment