Skip to content

Instantly share code, notes, and snippets.

@jaketrent

jaketrent/fillSvgContainer.html

Created December 23, 2014 15:48
Show Gist options
  • Save jaketrent/6316ed34064cf2fca6ab to your computer and use it in GitHub Desktop.
Save jaketrent/6316ed34064cf2fca6ab to your computer and use it in GitHub Desktop.
Download ZIP
100% Height/Width Fills SVG Container // source http://jsbin.com/juvevadeke/1/
Raw
fillSvgContainer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>100% Height/Width Fills SVG Container</title>
<style>
svg {
display: block;
margin: 30px;
outline: 5px solid #0099ff;
}
rect {
fill: #ff0055;
}
</style>
</head>
<body>
<p>
If you set the height and width in attributes (not css style) on a rect to 100%, it will fill the available container.
</p>
<svg height="200" width="200">
<rect x="0" y="0" height="100%" width="100%"></rect>
</svg>
<svg height="100" width="100">
<rect x="0" y="0" height="100%" width="100%"></rect>
</svg>
<svg height="50" width="50">
<rect x="0" y="0" height="100%" width="100%"></rect>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment