Hi,
Thank you all for the tips you gave me last time. I'm still at the initial phase of learning SVG, so it helped me a lot. But I've just stumbled into a new problem for which I cannot seem to find the solution. I have an svg document with dots and names. In an initial phase, certain names are invisible (for this I set the fill-opacity of the Texts to 0). When a button is clicked these names are moved to the left. After this animation has ended, the invisible names should become visible again (so fill-opcaticty=1). Below you can find an example of this, with only just a few names. When I use this code, the texts are invisible in the initial phase, but when the objects are moved to the left (with the animateTransform element) They are visible. After this animation has ended, the animation of the text is executed. But these text should not be visible during the Transform Animation. How can this be solved? (I'm working with the IE and adobe SVG Viewer) Many thanks! Kristien <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> <svg width="797.24409" height="629.26299" viewBox="0 0 797.24409 629.26299" enable-background="new 0 0 797.24409 629.26299" version="1.1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> <script type="text/ecmascript" xlink:href="verspringen.js"/> <script type="text/ecmascript"> <![CDATA[ var count=0; function clickFt(evt) { count++; //window.alert("counter: "+count); var SVGdoc=evt.target.ownerDocument; var useImage=SVGdoc.getElementById("useImage"); var pan=SVGdoc.getElementById("pan"); if(count==1){ eerstePan(SVGdoc,pan); } else{ window.alert("a click too much"); } } //def variabelen var dur="0.1s"; var valuesVerschijnen="0;0.1;1"; var valuesVerdwijnen="1;0"; var tempMatrix=""; var i=0; var xWaarden, yWaarden; var pos=25; var begin="pan.end"; //AANPASSINGEN NA EERSTE KEER TE PANNEN function eerstePan(SVGdoc, pan){ var tempPos=0; //window.alert("eertePan"); pan.setAttributeNS(null,"values", "0,0;-275,0"); //vERSCHIJNEN //Soro verschijnen var animSoro=SVGdoc.getElementById("animSoro"); animSoro.setAttribute("begin", begin); animSoro.setAttribute("values", valuesVerschijnen); animSoro.setAttribute("dur", dur); animSoro.setAttribute("fill", "freeze"); animSoro.beginElement(); //Schwerin verschijnen var animSchwerin=SVGdoc.getElementById("animSchwerin"); animSchwerin.setAttribute("values", valuesVerschijnen); animSchwerin.setAttribute("begin", begin); animSchwerin.setAttribute("dur", dur); animSchwerin.setAttribute("fill", "freeze"); //begin animaties pan.beginElement(); } ]]></script> <g id="animButton" onclick="clickFt(evt);"> <rect id="button" x="10" y="10" width="20" height="20" fill="red"/> <path id="driehoek" d="M 12 12 L 28 20 L 12 28 Z" fill="white"/> </g> <defs> <g id="totalImage" transform="scale(2) translate(-150,-100)"> <g id="cities"> <clipPath id="SVG_CP_1"> <path d="M0,0L0,629.26299L900.24409,629.26299L900.24409,0L0,0z"/> </clipPath> <g id="markerSchwerin" font-family="'ESRI Geometric Symbols'" font-size="1" kerning="0" font-weight="400" fill="#000000" clip-path="url(#SVG_CP_1)" xml:space='preserve'> <text transform="matrix(3.12004 0 0 3.11958 542.04745 184.05507)"><tspan x="0 ">x</tspan></text> </g> <g id="markerSoro" font-family="'ESRI Geometric Symbols'" font-size="1" kerning="0" font-weight="400" fill="#000000" fill-opacity="1" clip-path="url(#SVG_CP_1)" xml:space='preserve'> <text transform="matrix(3.12004 0 0 3.11958 545.6475 140.38099)"><tspan x="0 ">x</tspan></text> </g> </g> <g font-family="'Arial'" font-size="1" kerning="0" font-weight="400" fill="#000000" clip-path="url(#SVG_CP_1)" xml:space='preserve' fill-opacity="0"> <text transform="matrix(6.9601 0 0 6.95906 540 136)"><tspan x="0 0.65507 1.20672 1.55149 ">Soro</tspan></text> <animate id="animSoro" attributeName="fill-opacity"/> </g> <g font-family="'Arial'" font-size="1" kerning="0" font-weight="400" fill="#000000" clip-path="url(#SVG_CP_1)" xml:space='preserve' fill-opacity="0"> <text transform="matrix(6.9601 0 0 6.95906 540 180.42064)"><tspan x="0 0.65507 1.13776 1.72388 2.44791 2.99955 3.30985 3.55119 ">Schwerin</tspan></text> <animate id="animSchwerin" attributeName="fill-opacity"/> </g> </g> </defs> <use id="useImage" xlink:href="#totalImage"> <animateTransform id="pan" attributeName="transform" type="translate" dur="1s" begin="indefinite" calcMode="linear" fill="freeze"/> </use> </svg> [Non-text portions of this message have been removed] ------------------------------------ ----- To unsubscribe send a message to: [EMAIL PROTECTED] -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:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
