hilfe bei svg

[Speedx_0815]

hallo,

ich versuche grad das spiel Jawbreaker mit hilfe von svg und javascript umzusetze. jetzt habe ich zwei frage:

1. wie kann man die spielfeldgröße die ich in svg mit <g id size> ... angegeben habe im javascript umsetzen

2. wie sorg ich dafür das die kreis in diesem feld liegen???

das ist die svg datei:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<!-- New document created with EditiX at Sat Jan 23 16:33:02 CET 2010 -->

<svg id="svgsvg" width="100%" height="100%" viewBox="0 0 75 80" >

<!-- Verweis auf externe javascript Datei -->
<script type="text/javascript" xlink:href="script.js"/>


<!-- Text -->
<text x="10" y="7"
font-family="Comic Sans MS"
fill="black" font-size="4"> XML-Projekt ReMovem
</text>


<!-- Rechteck gross-->
<g id="feld">
<rect x="2" y="15" rx="3" ry="3" width="60" height="50"
stroke="#BA55D3" fill="#BA55D3" stroke-width="0.3">
</rect>

</g>

<!--gibt die größe des Spielfeldes an-->

<g id="size">
<rect x="6" y="20" width="32" height="39"
stroke="#C0C0C0" fill="#BA55D3" stroke-width="0.3">
</rect>
</g>


<!-- Ende des Spielfeldes-->




<defs>
<!--Grund Element fuer ein Kreis-->
<g id="buttons">
<rect id="butt" x="0" y="0" rx="3" ry="3" width="16" height="4"
stroke="#C0C0C0" fill="#BA55D3" stroke-width="0.3">
</rect>
</g>

<!--Unterschiedliche Kreis-->
<g id="kreis">
<circle cx="0" cy="0" r="1.5" stroke-width="0.5" stroke="inherit" fill="inherit">
</circle>
</g>

<g id="blue">
<use xlink:href="#kreis" x="5" y="0"></use>
</g>

<g id="red">
<use xlink:href="#kreis" x="10" y="0"></use>
</g>

<g id="green">
<use xlink:href="#kreis" x="15" y="0"></use>
</g>

<g id="orange">
<use xlink:href="#kreis" x="20" y="0"></use>
</g>
<!--Ende Unterschiedliche Kreis-->

<!--Definition wo die Kreise liegen-->

<g id="allekreise">
<use xlink:href="#blue" x="37" y="40" stroke="#000080" fill="#000080"/>
<use xlink:href="#red" x="37" y="40" stroke="#FF0000" fill="#FF0000"/>
<use xlink:href="#green" x="37" y="40" stroke="#006400" fill="#006400"/>
<use xlink:href="#orange" x="37" y="40" stroke="#FF8C00" fill="#FF8C00"/>
</g>

</defs>
</svg>

brauch schnell hilfe