svg layouts

hi,
I want to have 3 frames in my svg main frame.(just like java layouts ,exactly not frames.but different areas with in one frame.)one for display a map and another for display data.the actions done at map area does not affect to the data area.but data related to the map is displayed on data area.
if you can pls help me.
thanks,
kelum.

You can use svg elements for different areas in same main svg with different viewBox attributes.
You can also by script limite zoom and pan to single area, your map by example.

Michel

Hi, I'm working on a project that does something similar, it has a window in the SVG that displays a map which can be scrolled about (using controls or dragging) and zoomed in and out independant of the surrounding SVG.

If you're interested I'll post the code here (the gist of it is I used a clip-path).

hi,
i like to share the knowledge with you.if you can send me your code.
also i want to add pop up menu when right click on the map.have you any suggestions for that.
if you can help me.
regards,
kelum.

Hi!

Using this clip path object (defined in <defs>):
---
<clipPath id="viewer">
<rect x="10" y="10" width="600" height="450" style="stroke:black; fill:none; pointer-events:none;" />
</clipPath>
---

I used it to clip these objects:
---
<g style="clip-path:url(#viewer); pointer-events:none;">
<rect x="10" y="10" width="600" height="450" style="stroke:none; fill:lightgray; pointer-events:none;" />
<use transform="scale(1)" id="field" xlink:href="#map" x="-1920" y="-1300" width="4000" height="3000" style="pointer-events:none;" onmousedown="startPan()" onmousemove="Pan()" onmouseup="endPan()" />
</g>
---

The rectangle is just a grey background. The user element refers to the actual map, defined in the defs tag also. My #map code is pretty huge, since it contains geographic data, sprites and animation events so I can't really post it here. However this should help. I have some javascript code that allows me to pan across the map, zoom and in out.

The style setting 'pointer-events' does what you expect, if set to none its effectively ignores mouse clicks. This is useful since you might have several objects playered on top of each other, but you only want a mouse click to be effective on one object (use 'pointer-events:all').

Here's a good implementation using a viewBox instead of a clipPath courtesy Chris Peto:
http://www.web-zaehler.de/svgcafe/viewtopic.php?t=261

I shall probably implement a pop-up menu as well, I'll post the code for that once I've done it. I'll post the link for my test system shortly.

Hope this is helpful, please say if you need clarification.

usefulcat
PS What is the project you are working on, is a college or work project? What's ur deadline?

hi,
i have another three weeks to do this.this is my final academic project.
here i have lot of problems.i think you can help me.i have completed half of my project but with out clear understanding.where can i find good tutorial for handling svg dom.
also i want to know how to built svg widgets.
thanks,
kelum

See
http://www.learnsvg.com/tutorial2/catalog.php

for examples about methods and objects

Michel

For widgets, I reply soon
http://www.learnsvg.com/forum/viewtopic.php?t=159&sid=8093073e82ef51e67eaa270ef5cff310

This wikiwiki some useful information ...
http://www.protocol7.com/svg-wiki/