1. 坐标系统介绍
svg结构如下
<svg width="100" height="100" viewbox="0 0 100 100">
<!-- content -->
</svg>
1
2
3
2
3
1.1 尺寸单位
- px:
width=100 height=100不加单位情况下，px将作为默认单位 - em/ex: 当前字体尺寸/相当于小写字母
x的大小(通常为字体高度的一半) - in/cm/mm/pt/pc: 英寸/厘米/毫米/
1/72英寸/12点活字；这些都是绝对的物理单位 - %: 百分比，相对于父元素
1.2 坐标系统
svg的坐标系统可以分为两种：初始坐标系统和用户坐标系统
- viewport坐标系统: 大小是由
svg的width和height属性决定 - viewbox坐标系统: 大小由
viewbox属性确定
这两个坐标系统的关系可分为三种情况：
- 两者尺寸相同
- 两者宽高比相同
- 两者宽高比不相同
2. viewport与viewbox尺寸相同
- 示例中鸟的原始尺寸为150x100像素，下同
<svg width="150" height="100"> <!-- bird --> </svg>
<!-- 等价于 -->
<svg viewbox="0 0 150 100"><!-- bird --></svg>
<!-- 等价于 -->
<svg width="150" height="100" viewbox="0 0 150 100"><!-- bird --></svg>
1
2
3
4
5
6
7
2
3
4
5
6
7
3. viewport与viewbox尺寸比例相同
再分两种情况：
- viewport尺寸 = viewbox尺寸 x 2，此时图片会被放大
- viewport尺寸 = viewbox尺寸 x 0.5，此时图片会被压缩
3.1 viewport大于viewbox
- 源码
<svg width="300" height="200" viewBox="0 0 150 100"><!-- bird --></svg>
1
3.2 viewport小于viewbox
- 源码
<svg width="75" height="100" viewBox="0 0 150 100"><!-- bird --></svg>
1
3.3 viewbox偏移
viewbox除了可以设置大小，还可以设置偏移量
# 语法
viewBox = <min-x> <min-y> <width> <height>
1
2
2
示例
源码
<svg width="300" height="200" viewBox="30 30 150 100"><!-- bird --></svg>
1
<min-x> <min-y>作用在viewbox上，它们决定了viewbox和图片的相对偏移量；上例中，viewport相对图片向右向下偏移30px
4. viewport与viewbox尺寸比例不同
这种情况下，需要确定viewport和viewbox之间的对应关系，此时需要通过preserveAspectRatio属性来确定
# 语法
preserveAspectRatio = defer? <align> <meetOrSlice>?
1
2
2
- defer: 可选项。只作用在
<image>标签上，这里不讨论 - align: [xMin, xMid, xMax] x [yMin, yMin, yMax]加上'none'共有10个值
- meetOrSlice: meet和slice
TIP
为了便于理解，引入css中的backgroud属性解释。viewport对应div容器，viewbox对应image图片；align对应backgrou-position，比如当align="xMinyMid"时，相当于background-position="0 50%"；meetOrSlice对应background-size，meet对应background-size: contain，slice对应background-size: cover
下面举例说明，示例中viewport与viewbox尺寸均不同
4.1 perserveAspectRatio示例一
- 默认值:
align="xMidyMid"，meetOrSlice="meet" - 对应CSS:
background-position: 50% 50%; background-size: container
| align | meetOrSlice | background-postion | background-size |
|---|---|---|---|
xMidyMid | meet | 50% 50% | contain |
WARNING
注意理解background-size: contain，应用此属性需要同时满足下面两个条件
- 保证图片宽高比不变(可以等比例伸缩)
- 尽可能多的覆盖整个渲染区域(要么横向填满、要么纵向填满)
<svg width="500" height="200" viewBox="0 0 150 100"><!-- bird --></svg>
1
4.2 perserveAspectRatio示例二
| align | meetOrSlice | background-postion | background-size |
|---|---|---|---|
xMinyMin | meet | 50% 100% | contain |
<svg width="100" height="200" viewBox="0 0 150 100" preserveAspectRatio="xMidYMax meet">
<!-- bird -->
</svg>
1
2
3
2
3
4.3 preserveAspectRation示例三
| align | meetOrSlice | background-postion | background-size |
|---|---|---|---|
xMinyMid | meet | 0% 50% | contain |
<svg width="500" height="200" viewBox="0 0 150 100" preserveAspectRatio="xMinYMid meet">
<!-- bird -->
</svg>
1
2
3
2
3
4.4 preserveAspectRation示例四
| align | meetOrSlice | background-postion | background-size |
|---|---|---|---|
xMinyMax | slice | 0% 100% | slice |
<svg width="500" height="200" viewBox="0 0 150 100" preserveAspectRatio="xMinYMax slice">
<!-- bird -->
</svg>
1
2
3
2
3
WARNING
注意理解background-size: cover[，应用此属性需要同时满足下面两个条件
- 保证图片宽高比不变(可以等比例伸缩)
- 满足对图片的最小等比例伸缩下，将图片覆盖整个渲染区域
4.5 preserveAspectRation示例五
| align | meetOrSlice | background-postion | background-size |
|---|---|---|---|
xMinyMax | slice | 50% 100% | slice |