Replace one rectangle with the other (html/css)

Okay, once again this is for a school project for which I am not allowed to use java (b/c idk, it is too advanced and would actually make this a lot more fun...) So basically I have this rectangle inside this gigantic massive svg file. Now I want this rectangle to change size when I hover over it. I know there is a way with getbox to determine the center and make it bigger when you hover over it. since getbox is java I can't use it. So I thought I'd put two rectangles on top of each other, one slightly bigger than the other, set the biggers opacity to 0 and then put a style over it that says that the bigger ones opacity changes to 1 when I hover over it, so that it looks like the rectangle is changing size when really it just switches from one rectangle to the other. Only problem is it doesn't work. Now I don't know if it doesn't work b/c you cannot put two rectangles on top of each other or if it doesn't work b/c it is just plain wrong.

    <g
     inkscape:groupmode="layer"
     id="layer12"
     inkscape:label="Hobitton Cityicon"
     style="display:inline"
     sodipodi:insensitive="true"
     transform="translate(0,-4.0044824)">
    <style type="text/css">
 <![CDATA[   
     #rect10023:hover {opacity: 1!important}    
     ]]>

     </style>
     <a xlink:href="" onclick="window.open('print.html', 'newwindow', 'width=300, height=250'); return false;">
    <rect
       style="fill:#8f1212;fill-opacity:0;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="rect10023"
       width="15"
       height="15"
       x="266.97247"
       y="201.43393" />
     <rect
       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="rect10023b"
       width="8.2568808"
       height="6.880734"
       x="266.97247"
       y="201.43393" ><animate attributeName="fill" begin="2s" dur="2s" values="black;#660000" fill="freeze" />
    </rect></a> 
etc

Solution

There's the set element that can do the job.

<svg width="400" height="200">
  <rect width="300" height="100"
 >
     <set attributeName="width" to="400" begin="mouseenter" end="mouseout"/>
     <set attributeName="height" to="200" begin="mouseenter" end="mouseout"/>
    </rect>
</svg>

I'm not certain about its support though.

Doc: http://www.w3.org/TR/SVG/animate.html#SetElement

OR, you could use CSS transform.

rect {
    transition-duration: 0.7s;
}
rect:hover {
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
}

<svg width="400" height="200">
  <rect width="300" height="100">
    </rect>
</svg>