> I have a SVG with a viewBox of 600X800 that references an image file
> (PNG) that is larger than that size. Only the top left portion of the
> image is visible.
Maybe an example would help a little. The following code demonstrates
the issue I'm running into. I would like to be able to click and zoom
in one scale level, while centering the image where the user clicked.
If this line is commented out, the image centers properly:
//document.getElementById('img').setAttributeNS(null,'transform',scale);
But when I apply the scale, it's no longer centered.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg";
xmlns:svg="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";
fill="white" preserveAspectRatio="xMinYMin"
viewBox="0 0 800 600"
zoomAndPan="disable">
<script type="text/ecmascript"><![CDATA[
var xm=0, ym=0, zval=1;
var vfx1=0, vfy1=0, vfx2=800, vfy2=600;
var max_x = 800;
var max_y = 600;
function click(evt) {
xm=(evt.clientX); ym=(evt.clientY);
// Determine the new scale value
zval = (zval + 1);
var scale = 'scale('+zval+')';
vfx1 = (vfx1 + xm) - (max_x / 2);
vfy1 = (vfy1 + ym) - (max_y / 2);
var viewbox = vfx1+' '+vfy1+' '+max_x+' '+max_y;
alert(viewbox);
// Set the new scale value
document.getElementById('img').setAttributeNS(null,'transform',scale);
document.getElementById('imgsvg').setAttributeNS(null,'viewBox',viewbox);
}
]]></script>
<svg id="imgsvg">
<image id="img"
xlink:href="http://jackqu7.be/squares/screenshots/squares_1.
jpg" width="1152" height="864" onclick="click(evt)"
transform="scale(1.0)" />
</svg>
</svg>
-----
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/
<*> 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/
