SVG——显示区域
SVG就像一张无限大的画布，需通过以下的属性给它指定显示区域，尺寸和坐标系统之后才能显示出我们需要的内容。
viewPort
viewPort 也叫视口，用来控制画布区域的大小，主要通过 width 和 height 来指定。
可以指定的单位包括：
-
px
-
em
-
ex
-
pt
-
pc
-
cm
-
mm
-
in
省略单位则默认使用pt。
宽高各100px <svg width="100" height="100"> 宽高各100em <svg width="100em" height="100em"> viewPort 左上角的点为坐标原点(0, 0)，x轴向右不断变大，y轴向下不断变大。
viewBox
如果SVG是一个大画布， viewBox 就是这块画布上你想让人看到的部分。举例来说，假设整个屏幕是 viewPort ， viewBox 就是截图的那个截取框，截完了之后再将框中的内容整个显示在屏幕（ viewPort ）上。
viewBox 由以下几个属性构成：
-
x
相对原点的横向位移 -
y
相对原点的纵向位移 -
width
viewBox的宽度 -
height
viewBox的高度
<svg width="100" height="100" viewBox="0 0 50 50"> 表示从原点开始，截取左上角1/4大小，然后将这1/4完全铺满 viewPort 。
viewBox 从 viewPort 上截取一块区域。
然后将截取的内容铺满 viewPort 。
preserveAspectRatio
当 viewBox 的宽高比和 viewPort 的宽高比正好相同时，那没什么问题。如果宽高比不一致，那就得有个属性来决定如何显示了。
这个属性正是 preserveAspectRatio 。
preserveAspectRatio="alignment [meet | slice]" 默认值为 xMidYMid meet
其中，alignment指定轴和位置：
-
xMin
viewPort左侧和viewBox的x轴最小值对齐 -
xMid
viewPort水平中心和viewBox的x轴中心值对齐 -
xMax
viewPort右侧和viewBox的x轴最大值对齐 -
yMin
viewPort顶侧和viewBox的y轴最小值对齐 -
yMid
viewPort垂直中心和viewBox的y轴中心值对齐 -
yMax
viewPort底侧和viewBox的y轴最大值对齐
x和y可以任意组合，比如 xMinYMax ， xMaxYMid 等等。
meet
meet 表示按x和y轴中较小的尺寸等比缩小图形，以使图形完全填充 viewPort 。
preserveAspectRatio="xMinYMin meet"slice
slice 表示按x和y轴中较大的尺寸等比放大图形，并裁剪掉超出 viewPort 的部分。
preserveAspectRatio="xMinYMin slice"none
指定 preserveAspectRatio 为 none 表示根据不保留宽高比，图像会被挤压缩放，以适应 viewPort 。
preserveAspectRatio="none"另外，值得一提的是，SVG中还能嵌套SVG，子SVG拥有自己的坐标系统，就好像大画布中的小画布一样。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
