html - Svg absolute center - How to keep proportions -

html - Svg absolute center - How to keep proportions -

this code: http://jsfiddle.net/uorto4ny/2/

i'm trying fluid sized svg remain in middle of page , maintain it's proportions. far works on chrome in ie , firefox not maintain proportions (one side becomes longer other plenty though should same).

this css:

* { padding: 0; margin: 0; } body { font-family:"helvetica neue", arial, helvetica, sans; background: #f4f4f4 url('http://www.clker.com/cliparts/c/h/y/e/v/s/theta-400x400.svg') no-repeat center center fixed; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; background-size: 25% 25%; } { position: absolute; bottom: 0; right: 0; margin: 0px 10px 10px 0px; padding: 10px 18px; text-decoration: none; font-size: 12px; text-align: center; background-color: #fff; color: rgba(0, 0, 0, 0.44); border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.15); transition: background-color 0.3s ease 0s; } a:hover { background-color: rgba(87, 173, 104, 1); border: 1px solid rgba(87, 173, 104, 1); color: white; }

can please tell me going wrong?

james

working illustration here http://jsfiddle.net/uorto4ny/3/

just alter background-size this

-webkit-background-size: 25%; -moz-background-size: 25%; -ms-background-size: 25%; -o-background-size: 25%; background-size: 25%;

html css svg