如何让SVGsolidworks 整体缩放任意自动缩放

来源：蜘蛛抓取(WebSpider) 时间：2016-03-28 10:02 标签： 实现html页面整体缩放
如何在html页面中为&SVG&标签添加缩放滚动条_百度知道
如何在html页面中为&SVG&标签添加缩放滚动条
overflow: /*任何时候都强制显示滚动条*/overflow: /*需要的时候会出现滚动条*/overflow-x: /*控制X方向的滚动条*/overflow-y: /*控制Y方向的滚动条*/示例:&HTML& &HEAD& &TITLE&测试表格内的滚动条&/TITLE& &/HEAD& &BODY& &table&&tr&&td&表格内的滚动条:&/td&&td&&div id=&wins& style=&position:height:200;width:200;overflow:background:#EEEEEE;&& &p&pppppppppppppppppppppppppppppppppppppppppppppppppp &/p& &p&pppppppppppppppppppppppppppppppppppppppppppppppppp &/p& &p&ppppppppppppppppppppppppp &/p& &p&ppppppppppppppppppppppppp &/p& &p&ppppppppppppppppppppppppp &/p& &p&ppppppppppppppppppppppppp &/p& &p&ppppppppppppppppppppppppp &/p& &p&ppppppppppppppppppppppppp &/p& &p&ppppppppppppppppppppppppp &/p& &p&ppppppppppppppppppppppppp &/p& &p&ppppppppppppppppppppppppp &/p& &p&ppppppppppppppppppppppppp &/p& &/div&&/td&&/tr&&tr&&td colspan=&2& align=&right&&&span onmouseover='scrollb=setInterval(&wins.scrollLeft-=10&,100)' onmouseout=clearInterval(scrollb)&向左&/span& &span onmouseover='scrollb=setInterval(&wins.scrollTop-=10&,100)' onmouseout=clearInterval(scrollb)&向上&/span&&span onmouseover='scrollb=setInterval(&wins.scrollLeft+=10&,100)' onmouseout=clearInterval(scrollb)&向右&/span&&span onmouseover='scrollb=setInterval(&wins.scrollTop+=10&,100)' onmouseout=clearInterval(scrollb)&向下&/span&&/td&&/tr&&/table&&/BODY& &/HTML&
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁当前访客身份：游客 [
Time waits for no one
：引用来自“老张大哥”的评论这都是最基本的正则格...
：这都是最基本的正则格式，还需要这么记忆，也是醉...
：引用来自“Tickly”的评论有一个战场上的比喻更好...
：有一个战场上的比喻更好
：引用来自“卡布扎娃”的评论大侠，我这里提升访问...
：大侠，我这里提升访问被拒绝是怎么回事
今日访问：14
昨日访问：21
本周访问：14
本月访问：713
所有访问：6709
理解SVG的viewport,viewBox【1】
发表于2年前( 16:23)&&
阅读（1159）&|&评论（）
0人收藏此文章,
本文是看过前端达人张鑫旭的《理解SVG的viewport,viewBox,preserveAspectRatio》之后的反刍版。掌握了SVG的viewport,viewBox的相关知识点能让我们更简单的实现视图的缩放效果
viewport表示的是svg可视区大小，具体体现就是svg元素的width和height属性值所圈起来的区域：
&svg&width="400"&height="300"&style="border:1px&solid&#cd0000;"&
&&&&&rect&x="10"&y="5"&width="20"&height="15"&fill="#cd0000"/&
上述svg代码便定义了一个400px*300px的viewpoint，默认单位是px，也可以是其他web单位。上述代码的效果是：
在一个400px*300px的舞台上的(10,5)坐标位置放了一个20px*15px的矩形。显示效果全在意料之中，但是，如果svg增加新的属性viewBox，情况就大不相同了，代码：
&svg&width="400"&height="300"&viewBox="0,0,40,30"&style="border:1px&solid&#cd0000;"&
&&&&&rect&x="10"&y="5"&width="20"&height="15"&fill="#cd0000"/&
只是在svg标签中增加了
viewBox="0,0,40,30"
就发生如此大的变化，那viewBox的4个属性值分别是什么？它们在如何工作呢？
viewBox="0,0,40,30"//x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度
用鑫哥的比方就是：
“SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！”
viewBox的width\height越小，viewBox的效果越明显。好比我们截屏工具选中区域越小，后来截屏内容铺满屏幕时反差越大。
如果是极端情况，设置viewBox的width/height的大小和viewpoint也就是svg的width\height一样大小，那么即使使用了viewBox，也不会改变原有的效果，代码如下：
&svg&width="400"&height="300"&viewBox="0,0,400,300"&style="border:1px&solid&#cd0000;"&
&&&&&rect&x="10"&y="5"&width="20"&height="15"&fill="#cd0000"/&
它和没有给svg使用viewBox时的情况是一样的。这和你把一个满屏截图铺满屏幕显示是一样的原理，感受不到缩放。
本文只是皮毛之皮毛，以后再一点点写流水账。这种技术可以怎么应用呢？类似百度地图、谷歌地图那种点击放大效果就是典型。
更多开发者职位上
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读

我要回帖

更多关于 实现html页面整体缩放 的文章

 

随机推荐