Create horizontal scroll bar in SVG

Does anyone know how to create a horizontal scrollbar in SVG.
I currently have xsl file that creates vertical scrollbar. But i do not know how to add horizontal scrollbar.

Hi vidya,

I am in need of creating a vertical scrollbar in SVG. So that i can see the entire svg when displayed in an explorer.

Could you please help me out in this regard.

Thanks Inadvance,

Kishore Borra.

I just started to play out with SVG and for the moment I’m sticking only with Firefox. However, a solution I have used to solve your same problem (both vertical and horizontal) is by embedding (nothing to do with the ‘embed’ tag here) the svg in a CSS layer and using CSS to control scrollbars.
I found very nice the way SVG (or any other XML for that) can be easily mixed in xhtml files by the use of namespaces.
So, this is not a pure SVG solution but may be a valid solution.

Can you please send some sampe code for the same.

Thanks inAdvance,

Kishore Borra.

Hi kishoreborra,

here the relative bits to your problem from my solution

<?xml version=“1.0”?>
<?xml-stylesheet type=“text/css” href=“styles/test8.css” ?>
<%@ page language=“java” contentType=“application/xhtml+xml; charset=ISO-8859-1” pageEncoding=“ISO-8859-1”%>
<html xmlns=“” xmlns:xlink=“”>
<script type=“text/ecmascript” src=“scripts/test8.js”></script>
<body id=“body”>
.<!-- some jsp and xhtml code here –>
<div id=“mapContainer”>
.<!-- some jsp and svg code here –>
</div><!-- end of mapContainer –>
.<!-- some jsp and xhtml code here –>

Note that I’m using this code in a JSP application and so I have to set the content type to ‘application/xhtml + xml’ while keeping the file extention to jsp. In this way, it is interpreted by Firefox as an xhtml file and on the server it is still my jsp file with all the benefits from it

However, the important point here is that SVG and XHTML are both part of the XML world. Hence their can be mixed together by ensuring the namespaces are respected.

As the display issues of all DOM elements are manageable by stylesheets (not to mention Javascript…), please note the use of overflow property in the CSS rule associated with the ‘div’ layer that contain the svg code

./* some css code here*/
#mapContainer {
position: relative;
width : 790px;
height :500px;
overflow : auto;
border: solid 1px Gold;
padding : 0px;
margin: 0px;
./* some css code here*/

It manage the scrolling bars in a very simple way.

I’m sure this is just one of the possible solution to your problem.

Thanks for taking time to post the code.
I will let you know once i am done.

Thank you,
Kishore Borra