Skip to content

Instantly share code, notes, and snippets.

@ttepasse

ttepasse/test.xhtml

Forked from tobiastom/test.xhtml
Created May 20, 2010 15:08
Show Gist options
  • Save ttepasse/407675 to your computer and use it in GitHub Desktop.
Save ttepasse/407675 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Testing inline SVG …</title>
<style type="text/css" media="screen">
@namespace svg "http://www.w3.org/2000/svg";
@namespace "http://www.w3.org/1999/xhtml";
h1, p {
color: black;
}
svg|path.off { fill: red }
svg|path.on { fill: green }
</style>
</head>
<body>
<h1>Animiertes SVG</h1>
<p>Ganz ohne Javascript und CSS!</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="102px" height="102px">
<g fill="none">
<path d="M51,101 C78,101 101,78 101,51 C101,23 78,1 51,1 C23,1 1,23
1,51 C1,78 23,101 51,101"
stroke="rgb(0,0,0)"
stroke-width="1"
fill="none"/>
<path d="M46,96 L46,7 C46,7 7,11 7,51 C7,91 46,96 46,96"
stroke="rgb(0,0,0)"
stroke-width="1"
class="on">
<animate attributeName="class"
values="on; off"
calcMode="discrete"
dur="2s"
repeatCount="indefinite"/>
</path>
<path d="M55,96 L55,7 C55,7 94,11 94,51 C94,91 55,96 55,96"
stroke="rgb(0,0,0)"
stroke-width="1"
class="off">
<animate attributeName="class"
values="off; on"
calcMode="discrete"
dur="2s"
repeatCount="indefinite"/>
</path>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment