|
<svg width="450px" height="300px" version="1.1"> <desc>Example PreserveAspectRatio - illustrates preserveAspectRatio attribute</desc> <rect x="1" y="1" width="448" height="298" fill="none" stroke="blue"/> <g font-size="9"> <text x="10" y="30">SVG to fit</text> <g transform="translate(20,40)"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" 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" 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" 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" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="50" height="30"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" 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" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="50" height="30"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" 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" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="50" height="30"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" 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" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="30" height="60"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" 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" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="30" height="60"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" 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" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="30" height="60"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" 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" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="30" height="60"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" 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" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="30" height="60"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" 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" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="30" height="60"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/> </g> </svg> </g> </g> <g id="slice-group-2" transform="translate(250, 220)"> <text x="0" y="-30">--------------- slice ---------------</text> <g> <text y="-10">*YMin</text> <rect x=".5" y=".5" width="49" height="29" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="50" height="30"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/> </g> </svg> </g> <g transform="translate(70,0)"> <text y="-10">*YMid</text> <rect x=".5" y=".5" width="49" height="29" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="50" height="30"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/> </g> </svg> </g> <g transform="translate(140,0)"> <text y="-10">*YMax</text> <rect x=".5" y=".5" width="49" height="29" fill="none" stroke="blue"/> <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="50" height="30"> <rect x=".5" y=".5" width="29" height="39" fill="black" stroke="red"/> <g transform="translate(0, 5)"> <circle cx="15" cy="15" r="10" fill="yellow"/> <circle cx="12" cy="12" r="1.5" fill="black"/> <circle cx="17" cy="12" r="1.5" fill="black"/> <path d="M 10 19 A 8 8 0 0 0 20 19" stroke="black" stroke-width="2"/> </g> </svg> </g> </g> </g> </svg> |
| Original SVG source |
