topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-present-graphic-svg-matrix.htm / htm



  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="imagetoolbar" content="no">
    <link rel="icon" href="/srv/img/favicon.gif" type="image/gif">
  
  <!--additional header info goes here-->
    <meta name="keywords" content="cartography, kartographie, cartographie, map, karte, carte, svg, scalable vector graphics">
    <meta name="description" content="links on cartography by carto:net">
    <style type="text/css">
  body {background-image:url('http://www.carto.net/srv/img/backmap.gif'); background-repeat:no-repeat; background-color:#ffef95; font-family:Arial,Helvetica,Geneva,sans-serif;color:#B42D25; }
  
  /*B42D25 ~ rgb(180,44,37) bordeauxrot*/
  /*161682 ~ rgb(23,23,130) dklblau */
  /*168C16 ~ rgb(23,140,23) dklgruen */
  /*ffef95 ~ rgb(255,239,149) bg-gelb */
  
  a {text-decoration:underline; color:#168C16; background: transparent}
  
  h2 a {text-decoration:none;}
  
  .inpage { color:#168C16;}
  .expage { color:#161682;}
  
  a:visited {text-decoration:none;}
  
  /*
  a.inpage:visited {color:#6C6F12; background: transparent}
  a.expage:visited {color:#6C125D; background: transparent}
  */
  
  @media screen {  /* hide from IE3 */
  a[href]:hover { background: #ffa }
  }
  
  .lde {background-image:url('http://www.carto.net/srv/img/back_l_de.gif'); }
  .lfr {background-image:url('http://www.carto.net/srv/img/back_l_fr.gif'); }
  .len {background-image:url('http://www.carto.net/srv/img/back_l_en.gif'); }
  .les {background-image:url('http://www.carto.net/srv/img/back_l_es.gif'); }
  
  .higher { font-weight:bold; } /*TO BE REMOVED*/
  .bigger { font-weight:bold; }
  .smaller { font-size:small;}
  
  .chrihelptd { background-color:#FFEF95; } /*tabellen hintergrund in christans hilfen sollet allgem hintergrund entsprechen*/
  
  .newspostit { background-color:#f6ffd8;}
  
  p,h1,h2,h3,h4,ul,ol,li,div,td,th,address,blockquote,b,i,.keepnormfontcolor { font-family:Arial,Helvetica,Geneva,sans-serif; color:#B42D25 }
  tt,pre { font-family:"Courier New",Courier,monospace; color:#B42D25; }
  
  .info { border:1px solid; background-color:#eeeeee; padding:40px; margin:0px; }
  .info tt, .info pre { font-family:"Courier New",Courier,monospace; color:blue; }
  
    </style>
    <title>carto:net - 
  
    Example for Coordinate Transformations
  </title>
  </head>
  <body><a name="top"></a>
  
  <table width="100%">
          <tr>
                  <td align="left">
                          <img src="http://www.carto.net/srv/img/navig.gif" alt="" usemap="#navig" border="0" width="600" height="111">
                  </td>
          </tr>
  </table>
  <!-- ONLY navig.gif IMG NEEDED NORMALLY -->
  <map name="navig">
    <area shape="rect" coords="226,14,585,66" href="http://www.carto.net/" target="_top" alt="main page - page initiale - hauptseite - página principal">
    <area shape="rect" coords="272,77,433,106" href="http://www.carto.net/projects/" alt="projects - projets - projekte - proyectos">
    <area shape="rect" coords="454,77,598,106" href="http://www.carto.net/authors/" alt="authors - auteurs - autoren - autores">
    <area shape="rect" coords="130,77,253,106" href="http://www.carto.net/papers/" alt="papers - exposés - berichte - papeles">
    <area shape="rect" coords="25,77,109,106" href="http://www.carto.net/help/" alt="help - aide - hilfe - ayuda">
  </map>
  
  <div id="adBarContainer" style="margin-left:13px;float:right;right:8px;width:160px;height:600px;border:0px solid red;">
  <script type="text/javascript"><!--
  google_ad_client = "pub-6049981187637171";
          /* 160x600, Carto.net Standard */
          google_ad_slot = "4746507232";
          google_ad_width = 160;
          google_ad_height = 600;
  //-->
  </script>
  <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
  </div>
  
    <h2 class="sitemap"><a href="/">carto</a><span class="expage">:</span><a href="/papers/">papers</a><span class="expage">:</span><a href="/papers/svg/">svg</a><span class="expage">:</span><a href="/papers/svg/samples/">examples</a><span class="expage">:</span><a href="/papers/svg/samples/#base">basic</a><span class="expage">:</span>coordinate_transformations</h2>
  
  <h2>Example for Coordinate Transformations</h2>
  
        <table border="0" cellpadding="8" cellspacing="0"> 
          <tr>
            <td align="center" valign="top">
              <embed width="453" height="300" src="lib-present-graphic-svg-matrix.svg" name="printable_map_m" type="image/svg+xml" />
            </td>
            <td valign="top">
              <p>SVG allows different transformations: translation, rotation, scaling and skewing. The different transformations can be combined and nested. The matrix transformation is able to describe several transformations in one step, by using a 3x3 matrix from which actually only 6 values are used.</p>
              <p>In the example on the left side we deal with the same graphics: one object - defined once - with different transformations. Each object instance is translated to a new position.</p>
              <ul>
              <li>In the first row we used scaling with one or two independent factors. The latter leads to distortion in one dimension.</li>
              <li>In the second row we used skewing with one or two independent factors. One has to use decimal degrees.</li>
              <li>In the last row we used rotations. The last example shows an alternative syntax: all statements can be written by using a transformation matrix. Combinations can be accumulated using the rules of matrix calculations. Graphics software often exports SVG-code in this way, resulting in shorter code fragments - however manual interpretation might get more difficult by using this approach.</li>
              </ul>    
             </td>
          </tr>
        </table>
  
        <div class="info">
          <h4>Files used</h4>
          <p>Right-click, save ...</p>
  <ul>
            <li><tt><a href="matrix.shtml">matrix.shtml</a></tt></li>
            <li><tt><a href="matrix.svg">matrix.svg</a></tt></li>
          </ul>
  
          <h3>Technical Details</h3>
          <p>Zooming and panning has been disabled for this example. One can interactively try different transformation parameters in the <a href="http://www.adobe.com/svg/dynamic/transformations2.html" target="_new" class="expage">SVG tutorial</a> from Adobe (Internet Explorer and ASV3 on Windows only). Another option to transform the whole content of a graphics is to use the <tt>viewBox</tt> attribute on the <tt>&lt;svg /&gt;</tt> element as described in the <a href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute" class="expage" target="new">W3C SVG specification, chapter "Coordinate Systems, Transformations and Units</a> or demonstrated at Peter Schonefelds <a href="http://digitalcraft.com.au/svg/tutorials/01/viewingSVG.aspx" class="expage" target="new">viewBox and coordinate system tutorial</a>. The viewBox approach is also used in our <a href="../navigationTools/" class="inpage" target="new">Navigation Tools Tutorial</a>.</p>
          
          <h4>Unique definition of the map</h4>
          <p><tt>&lt;!DOCTYPE svg PUBLIC ... [</tt>
          <br>In the <tt>DOCTYPE</tt> section, even before the official SVG-section one can define reusable objects for later use.</p>
          <p><tt>&lt;!ENTITY Austria &quot</tt>
          <br>An <tt>entity</tt> (object) with the name <tt>Austria</tt> is created.</p>
          <p><tt>&lt;g transform='translate(-6000,500),scale(0.35)'&gt;</tt><br>For the following objects we use a group node. This is not necessary, but simplifies maintenance because transformation parameters need to be specified only once for the use on the whole group of objects.<p>
          <p><tt>&lt;rect fill='#F5C592' stroke='#1F1A17' stroke-width='3' x='-5614' y='2' width='11036' height='5979'/&gt;</tt>
          <br>A background rectangle.</p>
          <p><tt>&lt;path fill='#7CC5A1' stroke='#604F5E' stroke-width='28' d='M589 1050c19,-85 ... 82,-120z'/&gt;</tt>
          <br>The polygon defining the shape of Austria, consists partly of Bézier-curves.</p>
          <p><tt>&nbsp;&nbsp;&lt;/g&gt;</tt>
          <br>Closing of the SVG Group element.
          <p><tt>&quot;&gt;]&gt;</tt>
          <br>The DOCTYPE (entity defintion) of the embedded object is closed.
  
          <h4>The object defined above is presented without transformations:</h4>
          <p><tt>&lt;g id="norm"&gt;&amp;Austria;&lt;/g&gt;</tt>
          <br>The syntax to get an instance of a predefined object is <tt>&amp;entityName;</tt>.</p>
          
          <h4>We use transformations on the objects instance:</h4>
          <p><tt>&lt;g id=&quot;sc05&quot; transform=&quot;scale(0.5)&quot;&gt;&amp;Austria;&lt;/g&gt;</tt>
          <br>The transformation parameters are attached to the object (element or parent group). Subsequent transformation parameters are separated by <tt>,</tt> kommas.
          <p><tt>...</tt>
          <br><tt>&lt;g id=&quot;sc09&quot; transform=&quot;translate(6000,5400),scale(0.7),skewX(-40),skewY(20)&quot;&gt;&amp;Austria;&lt;/g&gt;</tt>
          <br>Parameters can be combined individually. The right sequence is crucial to get predictable results due to the mathematical matrix calculations involved.
          <p><tt>...</tt>
          <br><tt>&lt;g id=&quot;sc02&quot; transform=&quot;matrix(.707 .707 -.707 .707 0 0)&quot;&gt;&amp;Austria;&lt;/g&gt;</tt>
          <br>The parameters of a simple rotation -45 degrees. We deal with a 3x3 matrix, from which we use only the first 6 values. The last 3 ones must not be specified for geometric operations (2D transformations).<p>
          <p>See also <a href="http://www.w3.org/TR/SVG11/coords.html#TransformAttribute" class="expage">W3C-SPEC, chapter 7.6, "The transform attribute"</A> for additional, more detailed remarks on geometric transformations in SVG.</p>
        </div>
  <br><br>

  <table width="100%">
  <tr>
  <td align="left">Last modified: 
  
  Wednesday, 28-Feb-2007 14:13:26 CET
  <br>&copy; <a href="http://www.carto.net/#en_w3">carto<span class="expage">:</span>net</a> (<a href="http://www.carto.net/neumann/">andreas neumann</a> &amp <a href="/andre.mw/">andr&eacute; m. winter</a>)
  
  <br>original URL for reference: http://www.carto.net/papers/svg/samples/matrix.shtml>
  <td align="right" valign="top"><a class="expage" href="javascript:location.href='http://del.icio.us/post?v=3&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)"><img src="http://images.del.icio.us/static/img/delicious.med.gif" width="16" height="16" align="bottom" alt="del.icio.us"/>&nbsp;Add this page to del.icio.us</a></td>
  </tr></table>
  </body></html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.