svg在“container-fluid”中定位，iphone4-5-6出现莫名显示差异

Question

在html文件开头加了这样的代码，根据屏幕宽度设置svg的缩放（svg本身定义的width＝316，而container-fluid左右padding都是15，所以给屏幕宽度减去30）

<style id="style"></style>
<script>
    var phoneScale = (parseInt(window.screen.width-30))/316;
    document.getElementById('style').innerHTML='svg{transform: scale('+phoneScale+',1);margin-left:0px;}';
</script>

在iphone4-5中，svg元素（左）和父元素.container-fluid（右）分别是这样的：

在iphone6中，svg元素（左）和父元素.container-fluid（右）分别是这样的：

它们的css都是写的一样的啊，为什么会这样呢？是缩放基准点的问题吗？

Answer 1

我又自己解决了……
这个是缩放基准点的问题，需要定义如下样式：

svg{
  -webkit-transform-origin: 0 0 0;
  -moz-transform-origin: 0 0 0;
  -ms-transform-origin: 0 0 0;
  -o-transform-origin: 0 0 0;
  transform-origin: 0 0 0;;
}

默认不定义的话这个值会是50% 50% 0