Skip to content

Instantly share code, notes, and snippets.

@tobiastom

tobiastom/test.xhtml

Forked from ttepasse/test.xhtml
Created May 20, 2010 14:17
Show Gist options
  • Save tobiastom/407603 to your computer and use it in GitHub Desktop.
Save tobiastom/407603 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">
/* SVG-Namensraum unter dem Kürzel "svg" registriert */
@namespace svg "http://www.w3.org/2000/svg";
/* Defaultnamensraum ist XHTML */
@namespace "http://www.w3.org/1999/xhtml";
svg|path.off { fill: red }
svg|path.on { fill:green }
</style>
<script type="text/javascript">
window.onload = function() {
window.setInterval( function() {
var right = document.getElementById('right');
var left = document.getElementById('left');
if ( right.getAttribute('class') == 'on' ) {
right.setAttribute('class', 'off' );
left.setAttribute('class', 'on' );
} else {
right.setAttribute('class', 'on' );
left.setAttribute('class', 'off' );
}
}, 1000);
}
</script>
</head>
<body>
<h1>Animated SVG</h1>
<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 id="left" class="off" 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" fill="none"/>
<path id ="right" class="on" 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" fill="none"/>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment