SVG viewBox对齐各值表现体验实例页面

HTML代码：

<svg id="svg" width="400" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="80" height="80" fill="#cd0000"/>
</svg>
<p>meet/slice：<select id="select0">
    <option value="meet" selected>meet</option>
    <option value="slice">slice</option>
</select></p>
<p>x方向：<select id="select1">
    <option value="xMin" selected>xMin</option>
    <option value="xMid">xMid</option>
    <option value="xMax">xMax</option>
</select></p>
<p>y方向：<select id="select2">
    <option value="YMin" selected>YMin</option>
    <option value="YMid">YMid</option>
    <option value="YMax">YMax</option>
</select></p>
                

JS代码：

var svg = document.getElementById("svg"),
    select0 = document.getElementById("select0"), 
    select1 = document.getElementById("select1"), 
    select2 = document.getElementById("select2");
    
if (svg && select0 && select1 && select2) {
    [select0, select1, select2].forEach(function(select) {
        select.onchange = function() {
            svg.setAttribute("preserveAspectRatio", select1.value + select2.value + " " + select0.value);
        }
    });
}