svg-viewbox和preserveAspectRatio理解（分开理解）
1、viewBox参数
viewBox=“x, y, width, height” // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度
实例：
<svg width="500" height="200" viewBox="0 0 50 20" style="border: 1px solid #234567;">
<rect x="20" y="10" width="10" height="5"
style="stroke: #000000; fill:none;"/>
</svg>
实例解析：
此示例创建一个<svg>为500像素宽和200像素高，宽度元素的的viewBox属性包含四个坐标。这些坐标就定义了<svg>的viewBox属性。
在这种情况下，View Box跨度从0,0到50,20。这意味着，500 x 200像素 <svg>元素内部使用一个坐标系，它从0,0 到50,20。换言之，图形中使用的坐标，每1个单位，在<svg>对应于宽度500/50 = 10个像素，而在高200/20 = 10个像素。这就是为什么x轴为20及y轴为10的位置的矩形是真正位于（200,100），其宽度（10）和高度（5）对应于100个像素和50个像素。
2、preserveAspectRatio保持宽高比
2-1、第一个值指定的对齐由两部分组成（第一部分指定的x对齐和第二部分指定的y对齐。）
值 描述
• xMin 对齐View Box最小x轴的值与Viewport的左边缘。
• xMid 对齐View Box的x轴的中心与Viewport的中心x轴坐标。
• xMax 对齐View Box最大x轴的值与Viewport的右边缘。
• YMin 对齐View Box最小y轴的值与Viewport的顶部边缘。
• YMid 对齐View Box的y轴的中心与Viewport的中心y轴坐标。
• YMin 对齐View Box最大y轴的值与Viewport的底部边缘。
2-2、第二个值可以采取三种不同的值（宽高比如何将被保留）：
值 描述
• meet 保持宽高比和比例视图框，以适应内视口。
• slice 保留宽高比，任何不适合Viewport宽高比的图像的会被切掉。
• none 不保留宽高比。缩放图像以View Box充满完全适应Viewport。比例会被扭曲。
在第二部分preserveAspectRatio属性值附加到第一部分，以空格分隔。
代码调试：
<!DOCTYPE html>
<html>
<head>
<title>ViewBox 代码调试</title>
<style>
body {
background: #eee;
}
svg {
position: absolute;
border: 1px solid green;
width: 300px;
height: 200px;
left: 50%;
top: 50%;
最低0.47元/天 解锁文章
3824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
