Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
68 lines (67 sloc) 1.98 KB
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Just Enough SVG</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<style type="text/css">
svg rect.bar {
fill:#0000FF;
opacity: 0.75;
}
svg text {
font-size: 1.75em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">D3 Demos</a></h1>
</li>
</ul>
</nav>
<div class="row">
<div class="large-12 columns">
<h1>Just Enough SVG</h1>
</div>
</div>
<div class="row">
<div class="large-8 columns">
<p>Some quick examples of SVG.</p>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50" />
</svg>
</div>
<div class="large-4 columns">
<svg width="100%" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="5%" y="5" width="20%" height="30%" class="bar" />
<g>
<rect x="22%" y="5" width="20%" height="50%" class="bar" />
<rect x="39%" y="5" width="20%" height="75%" class="bar" />
</g>
</svg>
</div>
<div class="large-3 columns end">
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="50">
Howdy Campers!
</text>
</svg>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
You can’t perform that action at this time.