transform:scale();
transform-origin:center;
を使用し拡大した際の原点を画像(SVG)の中央にしたいのですがchromeで表示した場合は意図通りに、firefoxで表示させた場合意図通りになりません。
(下記画像の左がfirefox、右がchrome)
http://i.imgur.com/v94wKwP.png
ソースは以下になります
<svg class="canvas" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<style type="text/css">
<![CDATA[
.canvas {
background: #34495e;
}
.st0{
fill: #f1c40f;
opacity: 0.8;
transform-origin: center;
transform: scale(2.0);
}
.st1{
fill: #e74c3c;
}
]]>
</style>
<circle class="st0" cx="50" cy="50" r="25"/>
<circle class="st1" cx="50" cy="50" r="25"/>
</svg>

どこをどう訂正したらfirefoxで意図通りに表示させることが出来るでしょうか？
ご教授ください。