关于SVG的viewBox
2015-11-11 15:46
330 查看
在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小
如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏
考虑下,是不是这段SVG代码中所表达的数据全部均可被绘制出来达到可见呢?
svg出现了一个新的概念:viewBox
SVG就像是我们的显示器屏幕,viewBox就是截屏工具选中的那个框框,最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示
viewBox参数
viewBox="x, y, width, height" // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度
代码稍微修正下,增加viewBox控制
rect同样与svg尺寸一直,但是显示出来的大小确等比缩小了一倍
试着简单的理解:强制把分辨率提升到400*300 ,那么原来的svg尺寸是200*150,相对于400*300就等比缩小一倍了
同样的,如果把viewBox缩小一倍,那么反之svg会增加一倍
如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏
<svg width="200" height="150" style="border:1px solid #cd0000;"> <rect width="200" height="150" fill="#cd0000" /> </svg>
考虑下,是不是这段SVG代码中所表达的数据全部均可被绘制出来达到可见呢?
svg出现了一个新的概念:viewBox
SVG就像是我们的显示器屏幕,viewBox就是截屏工具选中的那个框框,最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示
viewBox参数
viewBox="x, y, width, height" // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度
代码稍微修正下,增加viewBox控制
<svg width="200" height="150" viewBox="0,0,400,300" style="border:1px solid #cd0000;"> <rect width="200" height="150" fill="#cd0000" /> </svg>
rect同样与svg尺寸一直,但是显示出来的大小确等比缩小了一倍
试着简单的理解:强制把分辨率提升到400*300 ,那么原来的svg尺寸是200*150,相对于400*300就等比缩小一倍了
同样的,如果把viewBox缩小一倍,那么反之svg会增加一倍
<svg width="200" height="200" viewBox="0,0,100,100" style="border:1px solid #cd0000;"> <rect width="200" height="200" fill="#cd0000" /> </svg>
相关文章推荐
- js 简单的音乐播放
- uiTextView简单的用法
- Array常用方法
- grep详解及相关面试题和答案
- 双击返回键退出应用
- Android 对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果
- Android 如何绘制text 为居中显示
- ip traffic export: how to mirror traffic on a router
- IE7下不支持jquery.attr("onclick","function(){}"),
- 如何在unity中使用protobuf工具生成cs类
- 测试密码的强度
- Kafka备忘
- spring上下文辅助类
- Scala 实现两个类型比较的实现
- Calculation method running time
- html5手机 input file 上传图片 调用API
- tomcat的maxThreads、acceptCount(最大线程数、最大排队数)
- display:none与visible:hidden的区别
- Lua中强大的元方法__index详解
- int 和integer的误用导致 listview的不刷新