Dear List, The tutorial on carto:net explains very well how to scale symbols using mousover and mouseout events. I wanted to include these functions in my mapping application. Unfortunately, they do not work using Google Chrome or Safari for PC. Please find below the svg document with 3 JS function that demonstrates the problem.
There seems to be no problem with the mouseover, mouseout and onclick events. But if you try to add some other manipulations inside the JS function like for example modifying the transform attribute (first JS function), or switching between different symbols (third JS function) the mouse events do no longer work ? You can try it out if you uncomment the fourth line of the first JavaScript function (upscaleObject). It seems to me this is a bug in SAFARI and Google Chrome? Thank you very much for your clarifications. Greetings <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg version="1.1" baseProfile="full" id="svgDocument" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; xmlns:attrib="http://www.carto.net/attrib"; xmlns:batik="http://xml.apache.org/batik/ext"; zoomAndPan="magnify"> <script type="text/ecmascript"> <![CDATA[ function upscaleObject(evt){ document.getElementById("eventtext").firstChild.nodeValue = String(evt.type); var element=evt.currentTarget; var newtransform="translate(0 0)scale(1.2)"; //element.setAttributeNS(null,'transform',newtransform); } function downscaleObject(evt){ document.getElementById("eventtext").firstChild.nodeValue = String(evt.type); var element=evt.currentTarget; var newtransform="translate(0 0)scale(1)"; //element.setAttributeNS(null,'transform',newtransform); } function clickObject(evt){ document.getElementById("eventtext").firstChild.nodeValue = String(evt.type); var element=evt.currentTarget; //if(element.getAttributeNS("http://www.w3.org/1999/xlink","href";)=="#symOpen"){ //element.setAttributeNS("http://www.w3.org/1999/xlink","href","#symClose";); //} //else{ //element.setAttributeNS("http://www.w3.org/1999/xlink","href","#symOpen";); } } ]]> </script> <defs> <!-- symbols OPEN CLOSE LISTS --> <symbol id="symOpen" overflow="visible" fill="none" stroke="rgb(51,102,153)" stroke-width="1.8" stroke-linecap="round"> <line x1="-4" y1="0" x2="4" y2="0"/> <line x1="0" y1="4" x2="0" y2="-4"/> <rect x="-5" y="-5" rx="0" ry="0" width="10" height="10" fill="red" stroke="black" stroke-width="0.1" opacity="0"/> </symbol> <symbol id="symClose" overflow="visible" fill="none" stroke="rgb(51,102,153)" stroke-width="1.8" stroke-linecap="round"> <line x1="-4" y1="0" x2="4" y2="0"/> <rect x="-5" y="-5" rx="0" ry="0" width="10" height="10" fill="red" stroke="black" stroke-width="0.1" opacity="0"/> </symbol> </defs> <!-- EXAMPLE --> <g transform="translate(100,30)"> <text id="eventtext" x="11" y="5" font-family="Trebuchet MS" font-size="14">evt.type</text> <a><use xlink:href="#symOpen" transform="translate(0,0)" onmouseover="upscaleObject(evt,1.2)" onmouseout="downscaleObject(evt,1)" onclick="clickObject(evt)"/></a> </g> </svg> ------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: mailto:svg-developers-dig...@yahoogroups.com mailto:svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
