Jeg har siddet og puslet med lidt svg og javascript. Måske kan andre
bruge min kode til noget sjovt. Er afprøvet på Firefox 3 Beta 5.
vh
Kenneth
<html xmlns="
http://www.w3.org/1999/xhtml">
<!--
buttons.xhtml
An experiment for learning about svg
Tested in Firefox 3 Beta 5
Written by Kenneth Bernholm
Released to the public domain in may 2008
-->
<head onload="bodyLoad()">
<script type='text/javascript'>
/* <![CDATA[ */
/*
Rect( svg rect id [,x] [,y] [,width] [,height] [,rounded] [,stroke
width] [,stroke color] [,fill color] [,fill opacity]
[,slg] [,flg] [,x2] [,y2] [,width2] [,height2] [,morphSpeed]
[,morphTime] )
*/
function Rect( r, x, y, w, h, rx, sw, sc, fc, fo, slg, flg, x2, y2,
w2, h2, ms, mt ) {
// X
this.setX = function setX( value ) {
this.x = value;
return document.getElementById( this.rect ).setAttribute( 'x',
value );
}
this.getX = function getX() {
return
Number( document.getElementById( this.rect ).getAttribute( 'x' ) );
}
// Y
this.setY = function setY( value ) {
this.y = value;
return document.getElementById( this.rect ).setAttribute( 'y',
value );
}
this.getY = function getY() {
return
Number( document.getElementById( this.rect ).getAttribute( 'y' ) );
}
// Width
this.setWidth = function setWidth( value ) {
this.width = value;
return document.getElementById( this.rect ).setAttribute( 'width',
value );
}
this.getWidth = function getWidth() {
return
Number( document.getElementById( this.rect ).getAttribute( 'width' ) );
}
// Height
this.setHeight = function setHeight( value ) {
this.height = value;
return document.getElementById( this.rect ).setAttribute( 'height',
value );
}
this.getHeight = function getHeight() {
return
Number( document.getElementById( this.rect ).getAttribute( 'height' ) );
}
// RX
this.setRX = function setRX( value ) {
this.rx = value;
return document.getElementById( this.rect ).setAttribute( 'rx',
value );
}
this.getRX = function getRX() {
return
Number( document.getElementById( this.rect ).getAttribute( 'rx' ) );
}
// StrokeWidth
this.setStrokeWidth = function setStrokeWidth( value ) {
this.strokeWidth = value;
return document.getElementById( this.rect ).setAttribute( 'stroke-
width', value );
}
this.getStrokeWidth = function getStrokeWidth() {
return
Number( document.getElementById( this.rect ).getAttribute( 'stroke-
width' ) );
}
// Stroke
this.setStroke = function setStroke( value ) {
this.stroke = value;
return document.getElementById( this.rect ).setAttribute( 'stroke',
value );
}
this.getStroke = function getStroke() {
return
document.getElementById( this.rect ).getAttribute( 'stroke' );
}
// Fill
this.setFill = function setFill( value ) {
this.fill = value;
return document.getElementById( this.rect ).setAttribute( 'fill',
value );
}
this.getFill = function getFill() {
return document.getElementById( this.rect ).getAttribute( 'fill' );
}
// FillOpacity
this.setFillOpacity = function setFillOpacity( value ) {
this.fillOpacity = value;
return document.getElementById( this.rect ).setAttribute( 'fill-
opacity', value );
}
this.getFillOpacity = function getFillOpacity() {
return
Number( document.getElementById( this.rect ).getAttribute( 'fill-
opacity' ) );
}
// Scale
this.scale = function scale( value ) {
this.scale = value;
var t = 'scale(' + value + ')';
return
document.getElementById( this.rect ).setAttribute( 'transform', t );
}
// Rotate
this.rotate = function rotate( value ) {
this.rotate = value;
var t = 'translate(' + this.getX() + ',' + this.getY() + ')
rotate(' + value + ') translate(' + -this.getX() + ',' + -this.getY()
+ ')';
return
document.getElementById( this.rect ).setAttribute( 'transform', t );
}
// morphSetup
this.morphSetup = function morphSetup() {
var steps = this.morphTime / this.morphSpeed;
// setup to change from state 1 to 2
if( this.morphState < 2 ) {
this.morphXdelta = ( this.x2 - this.x1 ) / steps;
this.morphYdelta = ( this.y2 - this.y1 ) / steps;
this.morphWdelta = ( this.width2 - this.width1 ) / steps;
this.morphHdelta = ( this.height2 - this.height1 ) / steps;
this.morphCount = 0;
this.morphState = 1;
}
// setup to change from state 2 to 1
else {
this.morphXdelta = ( this.x1 - this.x2 ) / steps;
this.morphYdelta = ( this.y1 - this.y2 ) / steps;
this.morphWdelta = ( this.width1 - this.width2 ) / steps;
this.morphHdelta = ( this.height1 - this.height2 ) / steps;
this.morphCount = 0;
this.morphState = 2;
}
}
// Morph
function morph() {
// x
var x = self.getX();
x += self.morphXdelta;
self.setX( x );
// y
var y = self.getY();
y += self.morphYdelta;
self.setY( y );
// width
var w = self.getWidth();
w += self.morphWdelta;
self.setWidth( w );
// height
var h = self.getHeight();
h += self.morphHdelta;
self.setHeight( h );
// scale stroke gradient
if( self.strokeLinearGradient ) {
self.strokeLinearGradient.setX1( self.getX() );
self.strokeLinearGradient.setY1( self.getY() );
self.strokeLinearGradient.setX2( self.getX() + self.getWidth() );
self.strokeLinearGradient.setY2( self.getY() + self.getHeight() );
}
// scale fill gradient
if( self.fillLinearGradient ) {
self.fillLinearGradient.setX1( self.getX() );
self.fillLinearGradient.setY1( self.getY() );
self.fillLinearGradient.setX2( self.getX() + self.getWidth() );
self.fillLinearGradient.setY2( self.getY() + self.getHeight() );
}
self.morphCount += self.morphSpeed;
if( self.morphCount >= self.morphTime ) {
clearInterval( self.morphHandle );
self.morphHandle = undefined;
if( self.morphState == 1 ) {
self.morphState = 2;
} else {
self.morphState = 1;
}
self = undefined;
}
}
// Morph
var self;
this.morphMe = function morphMe() {
var r;
// if any rect is morphing, no new morph
var go = 1;
for( r = 0; r < rects.length; r++ ) {
if( rects[ r ].morphHandle ) {
go = 0;
}
}
if( go ) {
// any rect (except this) in state2 must morph to state1
for( r = 0; r < rects.length; r++ ) {
if( rects[ r ] != this && rects[ r ].morphState == 2 ) {
rects[ r ].morphMe();
}
}
this.morphSetup();
self = this;
this.morphHandle = setInterval( morph, this.morphSpeed );
}
}
// Initialize new instance
if ( r ) {
this.rect = r;
this.setX( x || 10 );
this.setY( y || 10 );
this.setWidth( w || 100 );
this.setHeight( h || 30 );
this.setRX( rx || 1 );
this.setStrokeWidth( sw || 1 );
this.setStroke( sc || 'black' );
this.setFill( fc || 'red' );
this.setFillOpacity( fo || 1.0 );
this.strokeLinearGradient = slg || null;
this.fillLinearGradient = flg || null;
this.x1 = x || 10;
this.y1 = y || 10;
this.width1 = w || 100;
this.height1 = h || 30;
this.x2 = x2 || 100;
this.y2 = y2 || 100;
this.width2 = w2 || 500;
this.height2 = h2 || 300;
this.morphSpeed = ms || 10;
this.morphTime = mt || 300;
this.morphState = 0;
this.strokeLinearGradient.setX1( this.getX() );
this.strokeLinearGradient.setY1( this.getY() );
this.strokeLinearGradient.setX2( this.getX() + this.getWidth() );
this.strokeLinearGradient.setY2( this.getY() + this.getHeight() );
this.fillLinearGradient.setX1( this.getX() );
this.fillLinearGradient.setY1( this.getY() );
this.fillLinearGradient.setX2( this.getX() + this.getWidth() );
this.fillLinearGradient.setY2( this.getY() + this.getHeight() );
}
}
/*
LinearGradient( svg linearGradient id [,x1] [,y1] [,x2] [,y2] )
*/
function LinearGradient( lg, x1, y1, x2, y2 ) {
// X1
this.setX1 = function setX1( value ) {
this.x1 = value;
return
document.getElementById( this.linearGradient ).setAttribute( 'x1',
value );
}
this.getX1 = function getX1() {
return
Number( document.getElementById( this.linearGradient ).getAttribute( 'x1' ) );
}
// Y1
this.setY1 = function setY1( value ) {
this.y1 = value;
return
document.getElementById( this.linearGradient ).setAttribute( 'y1',
value );
}
this.getY1 = function getY1() {
return
Number( document.getElementById( this.linearGradient ).getAttribute( 'y1' ) );
}
// X2
this.setX2 = function setX2( value ) {
this.x2 = value;
return
document.getElementById( this.linearGradient ).setAttribute( 'x2',
value );
}
this.getX2 = function getX2() {
return
Number( document.getElementById( this.linearGradient ).getAttribute( 'x2' ) );
}
// Y2
this.setY2 = function setY2( value ) {
this.y2 = value;
return
document.getElementById( this.linearGradient ).setAttribute( 'y2',
value );
}
this.getY2 = function getY2() {
return
Number( document.getElementById( this.linearGradient ).getAttribute( 'y2' ) );
}
// Initialize new instance
if ( lg ) {
this.linearGradient = lg;
this.setX1( x1 || 10 );
this.setY1( y1 || 10 );
this.setX2( x2 || 500 );
this.setY2( y2 || 500 );
}
}
function linearGradientLoad( lg ) {
for( var i in lg ) {
eval( "this." + lg[ i ] + " = new LinearGradient( '" + lg[ i ] +
"' );" );
}
}
var rects = new Array(0);
function rectLoad( r, x, y, slg, flg ) {
var obj;
obj = eval( "this." + r + " = new Rect( r, x, y, 100, 30, 2, 5,
'black', 'red', '1.0', this." + slg + ", this." + flg + ", 10, 60,
1004, 530, 10, 100);" );
rects.push( obj );
}
/* ]]> */
</script>
<style>
stop.silverButtonStrokeBegin { stop-color: #F0F0F0; }
stop.silverButtonStrokeEnd { stop-color: #505050; }
stop.silverButtonFillBegin { stop-color: #E0E0E0; }
stop.silverButtonFillEnd { stop-color: #808080; }
stop.goldButtonStrokeBegin { stop-color: #FFFF00; }
stop.goldButtonStrokeEnd { stop-color: #FF5000; }
stop.goldButtonFillBegin { stop-color: #FFE000; }
stop.goldButtonFillEnd { stop-color: #FF8000; }
stop.pinkButtonStrokeBegin { stop-color: #FFF0F0; }
stop.pinkButtonStrokeEnd { stop-color: #FF50FF; }
stop.pinkButtonFillBegin { stop-color: #FFE0FF; }
stop.pinkButtonFillEnd { stop-color: #FF80FF; }
</style>
</head>
<body id="body" style="position:absolute; z-index:0; border:0px solid
black; width:1024px; height:600px;">
<svg xmlns="
http://www.w3.org/2000/svg" version="1.1">
<defs onload="linearGradientLoad( ['silverButtonStroke',
'silverButtonFill', 'goldButtonStroke', 'goldButtonFill',
'pinkButtonStroke', 'pinkButtonFill'] )" >
<linearGradient id="silverButtonStroke"
gradientUnits="userSpaceOnUse">
<stop class="silverButtonStrokeBegin" offset="0%"/>
<stop class="silverButtonStrokeEnd" offset="100%"/>
</linearGradient>
<linearGradient id="silverButtonFill"
gradientUnits="userSpaceOnUse">
<stop class="silverButtonFillBegin" offset="0%"/>
<stop class="silverButtonFillEnd" offset="100%"/>
</linearGradient>
<linearGradient id="goldButtonStroke"
gradientUnits="userSpaceOnUse">
<stop class="goldButtonStrokeBegin" offset="0%"/>
<stop class="goldButtonStrokeEnd" offset="100%"/>
</linearGradient>
<linearGradient id="goldButtonFill" gradientUnits="userSpaceOnUse">
<stop class="goldButtonFillBegin" offset="0%"/>
<stop class="goldButtonFillEnd" offset="100%"/>
</linearGradient>
<linearGradient id="pinkButtonStroke"
gradientUnits="userSpaceOnUse">
<stop class="pinkButtonStrokeBegin" offset="0%"/>
<stop class="pinkButtonStrokeEnd" offset="100%"/>
</linearGradient>
<linearGradient id="pinkButtonFill" gradientUnits="userSpaceOnUse">
<stop class="pinkButtonFillBegin" offset="0%"/>
<stop class="pinkButtonFillEnd" offset="100%"/>
</linearGradient>
</defs>
<rect onload="rectLoad('rect1', 10, 10, 'silverButtonStroke',
'silverButtonFill')" id="rect1" onclick="rect1.morphMe();"
style="stroke: url(#silverButtonStroke); fill:
url(#silverButtonFill);"/>
<rect onload="rectLoad('rect2', 150, 10, 'goldButtonStroke',
'goldButtonFill' )" id="rect2" onclick="rect2.morphMe();"
style="stroke: url(#goldButtonStroke); fill: url(#goldButtonFill);"/
>
<rect onload="rectLoad('rect3', 290, 10, 'pinkButtonStroke',
'pinkButtonFill')" id="rect3" onclick="rect3.morphMe();"
style="stroke: url(#pinkButtonStroke); fill: url(#pinkButtonFill);"/>
<text x="18" y="82" font-family="Lucida Sans Unicode" font-size="15"
fill="black" >Click the buttons...</text>
</svg>
</body>
</html>