UPPREVIOUSNEXT  Technologies Internet et Education, © TECFA
  8. Système de coordonnées, transformations et unités

8. Système de coordonnées, transformations et unités

Au menu:

8.1 Le canevas, les viewports et les unités

A. Le canevas SVG

B. Le viewport SVG

C. Longeurs

8.2 Création de viewports

A. Eléments qui créent un nouveau viewport

B. L’attribut viewBox

(explications à revoir un jour, c’est pas clair du tout .... désolé)

viewBox = "<min-x> <min-y> <width> <height>"

Attention: Ne pas utiliser autre chose que des simples nombres ! donc 1500 et pas 15mm ou 150px !!

Exemples:

<svg width="300px" height="200px" viewBox="0 0 1500 1000">

<svg width="300px" height="200px" viewBox="0,0,1500,1000">

Exemple 8-1: Redimensions d’un dessin de bureau avec ViewPort

<svg width="6cm" height="4.5cm"
 viewBox="0 0 400 300"
 >
 <rect x="0" y="0" width="400" height="300"         fill="yellow" stroke="blue" stroke-width="4"  />
....
 <g>
  <title>le gros bureau qui pose problème</title>
  <rect x="182" y="50" width="80" height="180" fill="blue" />
  <text x="185" y="200" font-size="20">180x80 cm </text>
 </g>
 <rect x="264" y="0" width="120" height="80"       fill="blue" />
</svg>

 

C. L’attribut preserveAspectRatio

preserveAspectRatio="<align> [<meetOrSlice>]"

Le paramètre "align"

Il existe pleins de différentes sortes de align. Ce paramètre indique ce qui doit se passer lorsque les rapports entre longeur et hauteur du viewBox ne correspondent pas au viewBox, autrement dit: comme "tirer" le graphisme.

Le paramètre "meetOrSlice"

Attention: respectez minuscules ou majuscules !!

Exemple 8-2: Adaptations d’un bureau à des ViewPort

....
<symbol id="bureau">
.....
</symbol>
<svg x="0.5cm" y="0.5cm" width="4cm" height="3cm"      viewBox="0 0 400 300"
>
  <use xlink:href="#bureau" /> </svg>
 <svg x="6cm" y="0.5cm" width="3cm" height="3cm" viewBox="0 0 400 300"
     preserveAspectRatio="none"
  >
  <use xlink:href="#bureau" />
</svg>
 <svg x="0.5cm" y="4cm" width="3cm" height="3cm" viewBox="0 0 400 300"     preserveAspectRatio="xMinYMin meet
"  >.... </svg>
 <svg x="6cm" y="4cm" width="3cm" height="3cm" viewBox="0 0 400 300"     preserveAspectRatio="xMinYMax slice" 
>
.... </svg>
 

(voir slide suivant pour un image)

 

 

8.3 Transformations avec l’attribut "transform"

A. Translations avec le paramètre "translate"

translate(<tx> [<ty>])

Exemple:

<g transform="translate(50,50)">

B. Redimensionnement (scaling) avec le paramètre "scale"

scale (<sx> [<sy>])

lorsque sy n’est pas indiqué on assume que sy=sx

Exemples:

<g transform="scale(2)"> <rect .... /> <g>

<g transform="scale(2,3)"> <rect .... /> <g>

C. Rotations avec le paramètre "rotate"

rotate(<rotate-angle> [<cx> <cy>])

D. Ordre des opérations

<g transform="translate(-10,-20) scale(2) rotate(45   translate(5,10)">
  <!-- graphics elements go here -->
</g>
 
<g transform="translate(-10,-20)">
  <g transform="scale(2)">
    <g transform="rotate(45)">
      <g transform="translate(5,10)">
        <!-- graphics elements go here -->
      </g> </g>   </g>  </g> 

Exemple 8-3: Simples transformations

<g transform="translate(10,40)">
 <g id="dessin"
 fill="none" stroke="red" stroke-width="3" >   <line x1="0" y1="0" x2="50" y2="0" />   <line x1="0" y1="0" x2="0" y2="50" /> </g>
 <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >      ABC (original) </text>
</g>
<g transform="translate(200,40)"
> <g transform="scale(1.5)"
> <use xlink:href="#dessin
" /> <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue">    ABC (tr.,scale)</text></g> </g>
....
<g transform="rotate(30)
"> ... </g>
...
<g transform="translate(200,160),scale(1.5),rotate(30)"> ...</g>
...
<g transform="translate(370,80),scale(0.5),rotate(30),skewY(30)">
....
<g transform="translate(450,20),scale(0.5,1),rotate(30),skewY(30)">
 

 


UPPREVIOUS NEXT -- TIE