main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:interactivity:scale_symbols

Example for scaling symbols


This example shows how to scale objects on mouse-over. Move mouser cursor over a symbol, it should then be scaled.

On symbols are applied mouse events like onmouseover, onmouseout. Those events start functions (defined in an external script-file) that act on the symbol touched by the cursor. Also check mouse-over effects for reference.

Files used

Right-click, save ...

Technical Details

Scaling is done with the following code:

function scaleObject(evt,factor) {
  //reference to the currently selected object
  var element = evt.getTarget();
  
  //query old transform value (we need the translation value)
  var curTransform = element.getAttribute("transform");
  curTransform = new String(curTransform); //Wert in ein String umwandeln
  //no fear from Regular expressions ... just copy it, I copied it either ...
  var translateRegExp=/translate\(([-+]?[\d.]+)(\s*[\s,]\s*)([-+]?[\d.]+)\)\s*/;
  
  //This part extracts the translation-value from the whole transform-string
  if (curTransform.length != 0) {
    var result = curTransform.match(translateRegExp);
    if (result == null || result.index == -1) {
       oldTranslateX = 0;
       oldTranslateY = 0;
    }
    else {
       oldTranslateX = result[1];
       oldTranslateY = result[3];
    }
    //concatenate the string again, add scale-factor
    var newtransform = "translate(" + oldTranslateX + " " 
                        + oldTranslateY + ") " + "scale(" + factor + ")";
  }
  //set transform-factor
  element.setAttribute('transform', newtransform);
}

In order to scale symbols we first have to get a reference to the object and the current translation factor. This is done by the lines var element = evt.getTarget(); and var curTransform = element.getAttribute("transform");. Afterwards we do a pattern matching with regular expressions to extract only the translation parts. Finally we concatenate the translation strings with the scale-factor and set it with the method element.setAttribute('transform', newtransform);. In order to trigger the function we use the following codes along with the symbol instantiation:

<use id="Zurich" transform="translate(682500 53500)"
                onmouseover="scaleObject(evt,2)"
                onmouseout="scaleObject(evt,1)"
                xlink:href="#symbolRect"/ >

In order to query the translation factor we have to instantiate the symbols using a transform attribute. We use the events onmouseover to scale the symbols and onmouseout to reset the transformation. The function scaleObject() takes the object reference and the scale-factor as argument.




Last modified: Wednesday, 25-Oct-2006 16:12:21 CEST
© carto:net (andré m. winter & andreas neumann)
original URL for reference: http://www.carto.net/papers/svg/samples/scale_symbols.shtml
del.icio.us Add this page to del.icio.us