topical media & game development
lib-present-graphic-svg-scale-symbols.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 scaling symbols
</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>
<h2>Example for scaling symbols</h2>
<table border="0" cellpadding="8" cellspacing="0">
<tr>
<td align="left" valign="top" rowspan="2">
<embed width="450" height="300" src="lib-present-graphic-svg-scale_symbols.svg" name="printable_map" type="image/svg+xml">
<br>
</td>
<td valign="top">
<p>This example shows how to scale objects on mouse-over. Move mouser cursor over a symbol, it should then be scaled.</p>
<p>On <a href="symbol.shtml">symbols</a> 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 <a href="mouse_over_effects.shtml">mouse-over effects</a> for reference.</p>
</td>
</tr>
</table>
<div class="info">
<h4>Files used</h4>
<p>Right-click, save ...</p>
<ul>
<li><tt><a href="scale_symbols.shtml">scale_symbols.shtml</a></tt></li>
<li><tt><a href="scale_symbols.svg">scale_symbols.svg</a></tt></li>
<li><tt><a href="scale_symbols.js">scale_symbols.js</a></tt></li>
</ul>
<h3>Technical Details</h3>
<p>Scaling is done with the following code:</p>
<pre>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);
}</pre>
<p>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 <tt>var element = evt.getTarget();</tt> and <tt>var curTransform = element.getAttribute("transform");</tt>. 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 <tt>element.setAttribute('transform', newtransform);</tt>. In order to trigger the function we use the following codes along with the symbol instantiation:</p>
<pre><use id="Zurich" transform="translate(682500 53500)"
onmouseover="scaleObject(evt,2)"
onmouseout="scaleObject(evt,1)"
xlink:href="#symbolRect"/ ></pre>
<p>In order to query the translation factor we have to instantiate the symbols using a <tt>transform</tt> attribute. We use the events <tt>onmouseover</tt> to scale the symbols and <tt>onmouseout</tt> to reset the transformation. The function <tt>scaleObject()</tt> takes the object reference and the scale-factor as argument.</p>
</div>
<br><br>
<table width="100%">
<tr>
<td align="left">Last modified:
Wednesday, 25-Oct-2006 16:12:21 CEST
<br>© <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> & <a href="/andre.mw/">andré m. winter</a>)
<br>original URL for reference: http://www.carto.net/papers/svg/samples/scale_symbols.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"/> Add this page to del.icio.us</a></td>
</tr></table>
</body></html>
(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.
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
