Files used

Right-click, save ...

• scale_symbols.shtml
• scale_symbols.svg
• scale_symbols.js

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.