<svg id="svg-root" width="450" height="450" zoomAndPan="magnify" preserveAspectRatio="xMidYMid meet" contentScriptType="text/ecmascript" contentStyleType="text/css" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
     <title id="test-title" content="structured text">coords-viewBox-BE-03</title>
     <desc id="test-desc" content="structured text">Validates viewBox specification and the preserveAspectRatio attribute</desc>
     <g id="test-body-content" transform="translate(0, 30)">
          <g style="font-size:9;">
               <desc content="structured text">Example PreserveAspectRatio - demonstrate available options</desc>
               <text x="10" y="30">SVG to fit</text>
               <g transform="translate(20,40)">
                    <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                    <g transform="translate(0, 5)">
                         <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                         <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                         <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                         <path d="M 10 19 A 8 8 0 0 0 20 19" style="stroke:black;stroke-width:2;"/>
                    </g>
               </g>
               <text x="10" y="110">Viewport 1</text>
               <g transform="translate(10,120)">
                    <rect x=".5" y=".5" width="49" height="29" style="fill:none;stroke:blue;"/>
               </g>
               <text x="10" y="180">Viewport 2</text>
               <g transform="translate(20,190)">
                    <rect x=".5" y=".5" width="29" height="59" style="fill:none;stroke:blue;"/>
               </g>
               <g id="meet-group-1" transform="translate(100, 60)">
                    <text x="0" y="-30">--------------- meet ---------------</text>
                    <g>
                         <text y="-10">xMin*</text>
                         <rect x=".5" y=".5" width="49" height="29" style="fill:none;stroke:blue;"/>
                         <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="50" height="30" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css">
                              <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                              <g transform="translate(0, 5)">
                                   <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                                   <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                                   <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                                   <path d="M 10 19 A 8 8 0 0 0 20 19" style="stroke:black;stroke-width:2;"/>
                              </g>
                         </svg>
                    </g>
                    <g transform="translate(70,0)">
                         <text y="-10">xMid*</text>
                         <rect x=".5" y=".5" width="49" height="29" style="fill:none;stroke:blue;"/>
                         <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="50" height="30" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css">
                              <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                              <g transform="translate(0, 5)">
                                   <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                                   <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                                   <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                                   <path d="M 10 19 A 8 8 0 0 0 20 19" style="stroke:black;stroke-width:2;"/>
                              </g>
                         </svg>
                    </g>
                    <g transform="translate(0,70)">
                         <text y="-10">xMax*</text>
                         <rect x=".5" y=".5" width="49" height="29" style="fill:none;stroke:blue;"/>
                         <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="50" height="30" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css">
                              <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                              <g transform="translate(0, 5)">
                                   <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                                   <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                                   <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                                   <path d="M 10 19 A 8 8 0 0 0 20 19" style="stroke:black;stroke-width:2;"/>
                              </g>
                         </svg>
                    </g>
               </g>
               <g id="meet-group-2" transform="translate(250, 60)">
                    <text x="0" y="-30">---------- meet ----------</text>
                    <g>
                         <text y="-10">*YMin</text>
                         <rect x=".5" y=".5" width="29" height="59" style="fill:none;stroke:blue;"/>
                         <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="30" height="60" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css">
                              <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                              <g transform="translate(0, 5)">
                                   <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                                   <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                                   <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                                   <path d="M 10 19 A 8 8 0 0 0 20 19" style="stroke:black;stroke-width:2;"/>
                              </g>
                         </svg>
                    </g>
                    <g transform="translate(50, 0)">
                         <text y="-10">*YMid</text>
                         <rect x=".5" y=".5" width="29" height="59" style="fill:none;stroke:blue;"/>
                         <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="30" height="60" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css">
                              <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                              <g transform="translate(0, 5)">
                                   <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                                   <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                                   <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                                   <path d="M 10 19 A 8 8 0 0 0 20 19" style="stroke:black;stroke-width:2;"/>
                              </g>
                         </svg>
                    </g>
                    <g transform="translate(100, 0)">
                         <text y="-10">*YMax</text>
                         <rect x=".5" y=".5" width="29" height="59" style="fill:none;stroke:blue;"/>
                         <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="30" height="60" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css">
                              <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                              <g transform="translate(0, 5)">
                                   <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                                   <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                                   <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                                   <path d="M 10 19 A 8 8 0 0 0 20 19" style="stroke:black;stroke-width:2;"/>
                              </g>
                         </svg>
                    </g>
               </g>
               <g id="slice-group-1" transform="translate(100, 220)">
                    <text x="0" y="-30">---------- slice ----------</text>
                    <g>
                         <text y="-10">xMin*</text>
                         <rect x=".5" y=".5" width="29" height="59" style="fill:none;stroke:blue;"/>
                         <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="30" height="60" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css">
                              <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                              <g transform="translate(0, 5)">
                                   <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                                   <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                                   <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                                   <path d="M 10 19 A 8 8 0 0 0 20 19" style="stroke:black;stroke-width:2;"/>
                              </g>
                         </svg>
                    </g>
                    <g transform="translate(50,0)">
                         <text y="-10">xMid*</text>
                         <rect x=".5" y=".5" width="29" height="59" style="fill:none;stroke:blue;"/>
                         <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="30" height="60" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css">
                              <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                              <g transform="translate(0, 5)">
                                   <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                                   <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                                   <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                                   <path d="M 10 19 A 8 8 0 0 0 20 19" style="stroke:black;stroke-width:2;"/>
                              </g>
                         </svg>
                    </g>
                    <g transform="translate(100,0)">
                         <text y="-10">xMax*</text>
                         <rect x=".5" y=".5" width="29" height="59" style="fill:none;stroke:blue;"/>
                         <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="30" height="60" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css">
                              <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                              <g transform="translate(0, 5)">
                                   <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                                   <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                                   <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                                   <path d="M 10 19 A 8 8 0 0 0 20 19" style="stroke:black;stroke-width:2;"/>
                              </g>
                         </svg>
                    </g>
               </g>
               <g id="slide-group-2" transform="translate(250, 190) translate(0, 30)">
                    <text x="0" y="-30">--------------- slice ---------------</text>
                    <g>
                         <text y="-10">*YMin</text>
                         <rect x=".5" y=".5" width="49" height="29" style="fill:none;stroke:blue;"/>
                         <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="50" height="30" zoomAndPan="magnify" contentScriptType="text/ecmascript" contentStyleType="text/css">
                              <rect x=".5" y=".5" width="29" height="39" style="fill:black;stroke:red;"/>
                              <g transform="translate(0, 5)">
                                   <circle cx="15" cy="15" r="10" style="fill:yellow;"/>
                                   <circle cx="12" cy="12" r="1.5" style="fill:black;"/>
                                   <circle cx="17" cy="12" r="1.5" style="fill:black;"/>
                                   <