这里显示rect的宽高都是133.33,请问这个数字是怎么算出来的呢,

这里显示rect的宽高都是133.33,请问这个数字是怎么算出来的呢,

viewBox问题还是不明白,如果viewbox宽和高不成比例,

<svg width="800" height="400" viewBox="0 0 600 200" preserveAspectRatio="xMidYMid meet"
    style="border:1px solid #ff0000;" xmlns="http://www.w3.org/2000/svg">
   <rect x="50" y="50" width="100" height="100" fill="#abcdef" />
</svg>

如果此时再改变viewbox的y值,仍然是13,为什么呢

<svg width="800" height="400" viewBox="0 0 600 100" preserveAspectRatio="xMidYMid meet"
    style="border:1px solid #ff0000;" xmlns="http://www.w3.org/2000/svg">
   <rect x="50" y="50" width="100" height="100" fill="#abcdef" />
</svg>



正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
怎么都被占用了呢 2018-04-10 17:18:31

在页面中是审查不到viewbox的,800*400是svg的大小。

怎么都被占用了呢 2018-04-10 16:55:15

这是因为preserveAspectRatio属性值的xMidYMid,高度变小了,再次居中的时候,将会下移的多些

  • 提问者 慕粉1257262530 #1
    当宽度缩放到800时,此时的viewbox高度是266,页面上显示的宽高是800X400,为什么显示的不是viewbox的高度呢
    2018-04-10 16:58:06
怎么都被占用了呢 2018-04-10 16:09:50

原因在于preserveAspectRatio属性值meet,它的作用如下:

http://img1.sycdn.imooc.com//climg/5acc6f7200016d7909040076.jpg

在这里,viebox的宽高和vieport的宽高比例不一致,viebox方法的时候,是宽度先适应vieport的大小,之后就不在放大了。2次高度的比例都小于宽度比例,而且viewbox的宽度一样大,所以放大的程度也是一样的。rect的方法是和viewbox的缩放比例是一样的,所以2次rect的宽高是一样的

  • 提问者 慕粉1257262530 #1
    谢谢您的解答,viewbox高度变为100之后,react图片大小不变,但是位置下移,请问这个怎么解释呢
    2018-04-10 16:33:30
  • 提问者 慕粉1257262530 #2
    对不起,这个缩放还是不明白,viewBox="0 0 600 200",“宽度先适应vieport的大小,之后就不在放大了”这句话,当宽度缩放到800时,此时的viewbox高度是266,为什么在页面上看到的是800x400呢,谢谢您的耐心解答
    2018-04-10 16:49:53
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师