Change the colour of a symbol

Dear Sir,

I create a SVG File and make a symbol like that-

<symbol id="pool_indoor" overflow="visible" transform="scale(4)">
<rect x="0" y="-2.5" rx="2" ry="2" width="32" height="35" style="fill:white"/>
<path d="M6 7.5 l0 20 l20 0 l0 -20" style="fill:none;stroke:rgb(50,150,255);stroke-width:3"/>
<path d="M1 10 l15 -10 l15 10" style="fill:none;stroke:rgb(50,150,255);stroke-width:3"/>
<path d="M6 15 q5,-5 10,0 t10 0 l0 12.5 l-20 0z" style="fill:rgb(50,150,255);"/>
</symbol>


Then call the symbol in the svg file like this -

<g id='ppp'>
<use xlink:href="#pool_indoor" x="450" y="1500" name='ppp'/>
</g>


Next I create a function and try to change colour of my created symbol, when click on it

My function like this

function fill_target(evt,color)
{
obj=evt.target.ownerDocument.getElementById("kaernten")
obj.setAttributeNS(null,'style',"fill:yellow;stroke:none;opacity:.2")}


function call Like this ;

<rect id="rect3" onclick="fill_target(evt,'red')" x="108" y="600" width="150" height="60" style="fill:blue;fill-opacity:0.3"/>


but i dont know how to acces a element within that symbol. That means i want to change the colous of the rectangle withing the symbol when i call the function
if you can help me.
regards,
Arunajith