View the code on GitHub
Tests:
Rectangle Text - uses variables and javascript functions
<![CDATA[
<var name="_var1" value="150"/>
<var name="_var2" value="250"/>
<rect width="Math.random()*50+_var2" height="_var1+20" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
]]>
Text Text - uses variables
<![CDATA[
<var name="size" value="22"/>
<text x="0" y="20" font-size="size" fill="red">SVGE</text>
<text x="120" y="20" font-size="size" fill="blue">is fun!</text>
]]>
Centered Text - uses variables and embedded JS
<![CDATA[
<var name="X" value="30"/>
<var name="Y" value="20"/>
<var name="W" value="300"/>
<var name="H" value="150"/>
<rect x="X" y="Y" width="W" height="H" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
<rect x="X+W/2 - W/4" y="Y+H/2 - H/4" width="W/2" height="H/2" style="fill:rgb(255,0,0);stroke-width:3;stroke:rgb(0,0,0)"/>
]]>
Cirlce Text - uses variables and embedded JS in variable decleration, and also trig
<![CDATA[
<var name="X" value="100"/>
<var name="Y" value="100"/>
<var name="R" value="30 + Math.random()*50"/>
<var name="theta" value="-60"/>
<circle cx="X" cy="Y" r="R" stroke="black" stroke-width="3" fill="red" />
<line
x1="X"
y1="Y"
x2="X + R * Math.cos(theta)"
y2="Y + R * Math.sin(theta)"
style="stroke:rgb(0,0,0);stroke-width:2" />
]]>