http://xinsheng.huawei.com/cn/blog/detail_485.html
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%"
οnlοad="startup(evt)"
>
<script>
<![CDATA[
var svgDocument=null;
var O=null;
var Q;
var svgns = 'http://www.w3.org/2000/svg';
var xlinkns = 'http://www.w3.org/1999/xlink';
function startup(evt){
O=evt.target
svgDocument=O.ownerDocument
O.setAttribute("onclick","stopped=!stopped;animate()")
Q=svgDocument.getElementById("Q")
animate()
}
c=.5
d=.01
stopped=true
function animate(){
if(stopped) return
c+=d
if ((c>1)||(c<0))d=-d
M = "matrix(" +.5+"," +c+ ","+c+",.6,0,0)"
Q.setAttribute("transform",M)
window.setTimeout("animate()",20)
}
//]]>
</script>
<rect x="0" y="0" width="100%" height="100%" fill="#888"/>
<g id="Q" transform="matrix(1 .3 0 .6 0 0)">
<text x="250" y="-15" fill="#800" font-size="40">Click to start/stop</text>
<image id="P" x="250" y="0"
width="280" height="300" xlink:href="http://marble.sru.edu/~ddailey/mp/p2.jpg" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%"
οnlοad="startup(evt)"
>
<script>
<![CDATA[
var svgDocument=null;
var O=null;
var Q;
var svgns = 'http://www.w3.org/2000/svg';
var xlinkns = 'http://www.w3.org/1999/xlink';
function startup(evt){
O=evt.target
svgDocument=O.ownerDocument
O.setAttribute("onclick","stopped=!stopped;animate()")
Q=svgDocument.getElementById("Q")
animate()
}
c=.5
d=.01
stopped=true
function animate(){
if(stopped) return
c+=d
if ((c>1)||(c<0))d=-d
M = "matrix(" +.5+"," +c+ ","+c+",.6,0,0)"
Q.setAttribute("transform",M)
window.setTimeout("animate()",20)
}
//]]>
</script>
<rect x="0" y="0" width="100%" height="100%" fill="#888"/>
<g id="Q" transform="matrix(1 .3 0 .6 0 0)">
<text x="250" y="-15" fill="#800" font-size="40">Click to start/stop</text>
<image id="P" x="250" y="0"
width="280" height="300" xlink:href="http://marble.sru.edu/~ddailey/mp/p2.jpg" />
</g>
</svg>