--- In [email protected], "markelliott2000" <[EMAIL PROTECTED]> wrote: > > Hi all, > > I have a problem changing the SVG viewbox dynamically (using > ecmascript), basically when I change the viewbox aspect ratio any > symbols within the picture which have there own viewbox don't zoom > correctly, instead they shift and lose scale. > > To overcome this problem, I am currently using the viewbox to > translate x and y and then currentScale = min(xScale, yScale). This > however is flawed and several pictures don't work well. Ideally I > would use preserveAspectRatio="yMidxMid meet" and complete the scaling > by setting the width and height in the outer viewbox. > > Has anyone got any ideas how I can either get allow the zoom to occur > using master viewbox, or a way I can zoom for both x, and y. > > Cheers >
The code is as follows; <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd";> <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; xmlns:m="http://test.co.uk/m"; preserveAspectRatio="none" viewBox="0 0 491505 327670" onload="zoomin(33887, 16346, 400806, 235366)"> <defs> <symbol id="sym531" preserveAspectRatio="none" viewBox="-19660.0 4232.1 32767 21162"> <g id="s1" fill="none"> <rect x="-9829.0" y="12697.7" width="9830.0" height="8464.3" fill="#0000FF" stroke="#0000FF" stroke-dasharray="284.3 " stroke-width="142.1" /> <line x1="-8519.0" y1="14179.9" x2="-5897.0" y2="19892.9" stroke="#FFFFFF" stroke-linecap="square" stroke-width="426.4" /> <line x1="-5897.0" y1="19681.1" x2="-4587.0" y2="15660.1" stroke="#FFFFFF" stroke-linecap="square" stroke-width="426.4" /> <line x1="-4587.0" y1="15872.0" x2="-3276.0" y2="19892.9" stroke="#FFFFFF" stroke-linecap="square" stroke-width="426.4" /> <line x1="-1310.0" y1="13754.9" x2="-3276.0" y2="19892.9" stroke="#FFFFFF" stroke-linecap="square" stroke-width="426.4" /> </g> </symbol> </defs> <g id="s50" fill="none"> <line x1="285075.0" y1="229370.0" x2="358800.0" y2="229370.0" stroke="#00FF00" stroke-linecap="square" stroke-width="426.4" /> <line x1="285075.0" y1="262140.0" x2="358800.0" y2="262140.0" stroke="#00FF00" stroke-linecap="square" stroke-width="426.4" /> <use xlink:href="#sym531" transform="translate(344055.0, 262140.0) scale(1, 1.50) scale(1, 0.65) scale(0.33, 0.25)" x="-294900.0" y="-262140.64516586336" /> <line x1="294900.0" y1="219540.0" x2="294900.0" y2="271970.0" stroke="#00FF00" stroke-linecap="square" stroke-width="426.4" /> <line x1="344055.0" y1="219540.0" x2="344055.0" y2="268690.0" stroke="#00FF00" stroke-linecap="square" stroke-width="426.4" /> <use xlink:href="#sym531" transform="translate(260490.0, 209710.0) scale(1, 1.50) scale(1, 0.65) scale(0.10, 0.10)" x="-294900.0" y="-262140.64516586336" /> <line x1="245745.0" y1="98300.0" x2="245745.0" y2="258860.0" stroke="#00FF00" stroke-linecap="square" stroke-width="426.4" /> <line x1="98295.0" y1="196600.0" x2="393210.0" y2="196600.0" stroke="#00FF00" stroke-linecap="square" stroke-width="426.4" /> <rect x="231000.0" y="183490.0" width="29490.0" height="26220.0" stroke="#00FF00" stroke-width="426.4" /> </g> <m:script xmlns:m="http://www.w3.org/2000/svg"; type="text/ecmascript" xlink:href="include.js" /> </svg> include.js ---------- function zoomin(x, y, width, height) { var vb = document.documentElement.getAttribute("viewBox"); var vp_w = 0; var vp_h = 0; if(vb) { var vba = vb.split(" "); //comes out with four string array vp_w = Number(vba[2]); vp_h = Number(vba[3]); } var y2 = vp_h - (y + height); var xoff = vp_w * (x / vp_w); var yoff = vp_h * (y2 / vp_h); var scale = Math.min((vp_w/width),(vp_h/height)); document.documentElement.currentScale = scale; document.documentElement.setAttributeNS(null,"viewBox",x+" "+y+" "+vp_w+" "+vp_h); } ------------------------------------ ----- 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/
