Change attribute of an SVG shape using jQuery

This is my SVG file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">

<script type="text/javascript" xlink:href="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" xlink:href="js/myscript.js"></script>

<rect id="kilote" x="70" y="70" width="50"  height="50"   style="fill:red"/>

</svg>

I want to change the "width" attribute of this rect from "myscript.js" file.

I have tried the fo开发者_运维百科llowing with no success (File: "myscript.js"):

$(function(){

$('rect[id="kilote"]').attr('width', '150');

});

I have tried the code here http://jsfiddle.net/k3Grd/21/ and it works.

However I can't make it work locally on Firefox / Chrome.

Any tips?

Thanks in advance!!!