HTML5，CSS3，SVG - 绝对位置 - 相对大小和定位 - 响应式设计

Question

我想知道某人是否有针对以下问题的解决方案：

我正在尝试开发一个需要svg集成的流畅且响应迅速的网站。

我目前的问题与svg元素需要保持纵横比同时使其完全响应这一事实有关。见下文：

在此决议下工作正常：

错误的定位：

在这里你可以找到css：

div.body {
    width: 100%;
    height: 70%;
    background: #39BFBD;
    position: absolute;
    top: 0;
    left: 0;
}
.scene {
  width: 42%;
  height: 65%;
  left: 30%;
  top: 10%;
  position: absolute;
}
.scene .inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.scene .inner div {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  z-index: 10;
}
.scene .inner div svg {
  width: 100%;
  height: 100%;
}
.scene .inner div.chair {
  width: 11%;
  height: 33%;
  -webkit-transform: translate(-11%, 0);
  -moz-transform: translate(-11%, 0);
  -ms-transform: translate(-11%, 0);
  -o-transform: translate(-11%, 0);
}
.scene .inner div.chair.chair-1 {
  left: 20%;
}
.scene .inner div.chair.chair-2 {
  left: 64%;
}
.scene .inner div.table {
  left: 40%;
  width: 28%;
  height: 23%;
  -webkit-transform: translate(-28%, 0);
  -moz-transform: translate(-28%, 0);
  -ms-transform: translate(-28%, 0);
  -o-transform: translate(-28%, 0);
}
.scene .inner div.coffee {
  width: 5.2%;
  height: 9.7%;
  bottom: 23%;
  -webkit-transform: translate(-5.2%, 0);
  -moz-transform: translate(-5.2%, 0);
  -ms-transform: translate(-5.2%, 0);
  -o-transform: translate(-5.2%, 0);
}
.scene .inner div.coffee.coffee-1 {
  left: 38%;
}
.scene .inner div.coffee.coffee-2 {
  left: 50%;
}
.scene .inner div.floor {
  z-index: 9;
  width: 100%;
  height: 2%;
  background: #28B3AD;
  bottom: 0;
}

我附上了一个jsfiddle示例：http://jsfiddle.net/U8j7a/