html - Svg 绝对中心 - 如何保持比例

Question

这是我的代码:http://jsfiddle.net/uorto4ny/2/

我正在尝试让流体大小的 SVG 保持在页面中间并保持其比例。到目前为止，它适用于 chrome，但在 IE 和 Firefox 中它没有保持其比例(一侧变得比另一侧足够长，尽管它们应该相同)。

这是我的 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%;
}
a {
    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;
}

谁能告诉我哪里出错了？

詹姆斯

Answer 1

工作示例在这里 http://jsfiddle.net/uorto4ny/3/

只要把你的背景尺寸改成这个

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