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


在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(右)分别是这样的:

clipboard.png clipboard.png

在iphone6中,svg元素(左)和父元素.container-fluid(右)分别是这样的:
clipboard.png clipboard.png

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

d3 浏览器兼容性 svg css bootstrap

yoki君_ 9 years, 10 months ago

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


 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

usoda answered 9 years, 10 months ago

Your Answer