最近做一个流程图绘制项目，所以研究了一下svg。发现svg目前浏览器支持的挺强大的，但是svg本身有很多背景知识和元素属性以及js库等，如何系统地掌握这一强大工具呢？
viewPort(视窗)和viewBox(视野)
这两个词的翻译还是比较好的！你站在屋子里通过窗户来看外面的世界。窗户的大小是固定的，比如是400*200,可外面的世界是无限大的！那是不是你就只能看到窗户大小般的世界和井底之蛙一般呢？如果真是这样，那viewBox就没用了。想想看，如果你里窗户越远，是不是看到的越多呢？当你和窗户津贴成二维平面时，就真的是井底之蛙了。所以viewBox就很有意义了！
<svg width="400" height="200" viewBox="0 0 200 50" preserveAspectRatio=‘xMidYMin‘ style="border:1px solid greenyellow">
<rect fill="#00ff00" width=‘100‘ height="100" x="0" y="0"></rect>
</svg>- svg是html标签，类似于canvas，代表上面所说的viewPort.这里浏览器会渲染一块
400*200的空白区域（窗户）。 - 我们发现上面的宽高属性没有单位，所以默认是px.所以我们应该看到的是一块100px*100px的绿色正方形
但是结果不是我们想要的
- 首先html width,height属性如果没有单位就是px,svg是
400*200，没有问题。 - 但是里面的rect明明是
100*100怎么就变成了200*200
结论
- svg标签包裹的世界（代表是viewBox
viewBox="0 0 200 50"）和外部html（代表是viewPortwidth="400" height="200"）的世界不是一体的。 - 如果上面的svg元素没有viewBox和preserveAspectRatio属性，那viewPort和viewBox的单位像素是1：1的，我们通过改变viewBox属性，改变两个世界的单位像素比例.
两个世界(viewPort和viewBox)的单位像素
怎么理解两个世界
demo: 1.html
<body>
<div>
<svg width=‘200px‘ height="200px">
<polygon id=‘star‘ points=‘100,0 0,100 100,200 200,100‘ fill="none" stroke=‘black‘/>
</polygon>
</polygon>
</svg>
</div>
</body>
</html>
- 上面是HTML的世界，在这个世界里，我们可以通过使用css改变和定位svg(viewPort)，这里viewPort就定义成了
300*300,代表着svg在HTML世界中只能占据300*300的空间。 - 难道我在svg中画图只能画限制在
300*300空间的图吗？不可能，事实上我可以画无穷大，上面的polygon可以设置成更大。这个无穷大的空间就是svg世界 - 如果这样的话，因为默认两个世界的比例是1：1，所以你会看不到所有部分。
<polygon id=‘star‘ points=‘100,0 0,200 100,400 200,200‘ fill="none" stroke=‘black‘/>
preserveAspectRatio属性
ViewBox属性和preserveAspectRatio属性配合使用。
- viewBox
<svg width=‘200px‘ height="200px" viewBox="0 0 400 400">
<!-- <polygon id=‘star‘ points=‘100,0 0,100 100,200 200,100‘ fill="none" stroke=‘black‘/> -->
<polygon id=‘star‘ points=‘100,0 0,200 100,400 200,200‘ fill="none" stroke=‘black‘/>
<text x=‘60‘ y=‘160‘ style="font-size:16">svg:200*200</text>
</svg>如果viewBox width和height等比例缩放的话，这个图形会相应缩放。
如果width和height不是等比例呢，这时，preserveAspectRatio属性就起作用了.
preserveAspectRatio包含两部分：
- align
- meetOrSlice
这两个使用请参考这个例子[ViewBox演示]()
- 在viewBox的宽高比和viewport的宽高比不匹配的情况，它的值必须是以下其中一个
- xMinYMin
- xMidYMin
- xMaxYMin
- xMinYMid
- xMidYMid
- xMaxYMid
- xMinYMax
- xMidYMax
- xMaxYMax
啊,属性这么多！
但是我只要说一个，你就明白了！(不明白的话，在ViewBox演示
- xMinYMin 强制等比例缩放，viewBox的min-x坐标值和viewport的最左边的x对齐。viewBox的min-y坐标和viewport的最左边的y坐标对齐,
原文地址：https://www.cnblogs.com/baimeishaoxia/p/12640848.html
时间： 2024-11-10 13:46:30