Coordinates systems : Viewpoint attributes

A new point of view can be set up to constraint a set of objects to stay inside a defined area
• All the elements which can establish a new point of view share the viewBox attribute
• viewBox ( minx , miny, width, heigth )
• Example :

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd" [ <!ENTITY Smile "   <rect x='.5' y='.5' width='29' height='39' style='fill:yellow; stroke:red'/>   <g transform='rotate(90)'>     <text x='10' y='10' style='font-family:Verdana;            font-weight:bold; font-size:14'>:)</text>   </g>"> <!ENTITY Viewport1 "<rect x='.5' y='.5' width='49' height='29'                           style='fill:none; stroke:blue'/>"> <!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59'                            style='fill:none; stroke:blue'/>"> ]> <svg width="480px" height="270px" style="font-family:Verdana; font-size:8">   <desc>Example PreserveAspectRatio - demonstrate available options</desc>   <text x="10" y="30">SVG to fit</text>   <g transform="translate(20,40)">&Smile;</g>   <text x="10" y="110">Viewport 1</text>   <g transform="translate(10,120)">&Viewport1;</g>   <text x="10" y="180">Viewport 2</text>   <g transform="translate(20,190)">&Viewport2;</g>   <text x="100" y="30">--------------- meet ---------------</text>   <g transform="translate(100,60)"><text y="-10">xMin*</text>&Viewport1;     <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g>   <g transform="translate(170,60)"><text y="-10">xMid*</text>&Viewport1;     <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g>   <g transform="translate(240,60)"><text y="-10">xMax*</text>&Viewport1;     <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g>   <text x="330" y="30">---------- meet ----------</text>   <g transform="translate(330,60)"><text y="-10">*YMin</text>&Viewport2;     <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <g transform="translate(380,60)"><text y="-10">*YMid</text>&Viewport2;     <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <g transform="translate(430,60)"><text y="-10">*YMax</text>&Viewport2;     <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <text x="100" y="160">---------- slice ----------</text>   <g transform="translate(100,190)"><text y="-10">xMin*</text>&Viewport2;     <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <g transform="translate(150,190)"><text y="-10">xMid*</text>&Viewport2;     <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <g transform="translate(200,190)"><text y="-10">xMax*</text>&Viewport2;     <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <text x="270" y="160">--------------- slice ---------------</text>   <g transform="translate(270,190)"><text y="-10">*YMin</text>&Viewport1;     <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g>   <g transform="translate(340,190)"><text y="-10">*YMid</text>&Viewport1;     <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g>   <g transform="translate(410,190)"><text y="-10">*YMax</text>&Viewport1;     <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g> </svg>

Didier Courtaud The SVG language Novembre 2001

24 / 74