You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by "Sreedharan, Vijesh" <v....@sap.com> on 2005/03/30 03:12:13 UTC
Svg doubt
Hi batik users,
I have a question.
I have a html document which embeds 3 svg's. I am creating zoom
functions for the all the three svg's. Although the zoom function for
each of them is working individually, there is a small bug in it which I
am not able to understand. When I resize the first image to a higher
size, the second and third image also resizes (not really resizes, but
then it fits to the page as the page is now having scroll bars). Is
there any way that I can freeze the first and second image while I
zoom/unzoom the third one?
Following is the code for my js file. I have three svg files,
internalSvg, viewSvg and coalitionSvg. I could not manage to find the
error, hence I had put the three into 3 individual methods. For e.g. In
my html page, I have 3 comboboxes with different values and on change
for the combobox, it would call the initInternalModel() method, which
would call the initInternalControl() method and that would call the
internalZoom() method. This is same with the other two combo boxes as
well.
I hope someone could give me a hand with this. Any help would be
appreciated.
Regards,
Vijesh
var blnInitial = true;
var blnInitial2 = true;
var blnInitial3 = true;
var currentWidth = 0;
var currentHeight = 0;
function initInternalModel() {
try {
var internalSvgDoc =
document.internalSvg.getSVGDocument();
var internalSvgRootDoc =
internalSvgDoc.getRootElement();
var internalSvgbBox = internalSvgRootDoc.getBBox();
if(blnInitial2) {
blnInitial2 = false;
internalSvgRootDoc.setAttribute("viewBox",
(internalSvgbBox.x - 5) + " " + (internalSvgbBox.y - 50) + " " +
(internalSvgbBox.width + 50) + " " + (internalSvgbBox.height - 350));
internalSvgRootDoc.setAttribute("preserveAspectRatio", "xMinYMin");
}
initInternalControl(internalSvgDoc, internalSvgbBox);
}
catch (e) {
}
}
function initInternalControl(doc, bBox) {
try {
var svgDoc = doc;
var svgRootDoc = svgDoc.rootElement;
svgRootDoc.controlFrame = this;
this.bBox = svgRootDoc.createSVGRect();
this.bBox.x = bBox.x;
this.bBox.y = bBox.y;
this.bBox.width = bBox.width;
this.bBox.height = bBox.height;
var docSVG = document.internalSvg.getSVGDocument();
currentWidth =
docSVG.documentElement.getAttribute("width");
currentHeight =
docSVG.documentElement.getAttribute("height");
svgRootDoc.setAttribute("zoomAndPan", "disable");
var strCurrentZoom =
document.getElementById('internalComboBox').value;
internalZoom(strCurrentZoom);
}
catch(e) {
if (e.description == null) {alert("Exception: " +
e.message); }
else { alert("Exception: " + e.description); }
}
}
function internalZoom(zoomValue) {
try {
if (zoomValue == "Fit") {
document.internalSvg.width = "100%";
document.internalSvg.height =
parseInt(currentHeight)+100;
return;
}
var z = parseInt(zoomValue) / 10.0;
document.internalSvg.width = parseInt(currentWidth) *
z;
document.internalSvg.height =
parseInt(currentHeight)*z/10;
}
catch(e) {
if (e.description == null) {alert("Exception: " +
e.message); }
else { alert("Exception: " + e.description); }
}
}
function initViewModel() {
try {
var viewSvgDoc = document.viewSvg.getSVGDocument();
var viewSvgRootDoc = viewSvgDoc.getRootElement();
var viewSvgbBox = viewSvgRootDoc.getBBox();
if(blnInitial) {
blnInitial = false;
viewSvgRootDoc.setAttribute("viewBox",
(viewSvgbBox.x - 5) + " " + (viewSvgbBox.y - 50) + " " +
(viewSvgbBox.width + 50) + " " + (viewSvgbBox.height - 350));
viewSvgRootDoc.setAttribute("preserveAspectRatio", "xMinYMin");
}
initViewControl(viewSvgDoc, viewSvgbBox);
}
catch (e) {
}
}
function initViewControl(doc, bBox) {
try {
var svgDoc = doc;
var svgRootDoc = svgDoc.rootElement;
svgRootDoc.controlFrame = this;
this.bBox = svgRootDoc.createSVGRect();
this.bBox.x = bBox.x;
this.bBox.y = bBox.y;
this.bBox.width = bBox.width;
this.bBox.height = bBox.height;
var viewDocSVG = document.viewSvg.getSVGDocument();
currentWidth =
viewDocSVG.documentElement.getAttribute("width");
currentHeight =
viewDocSVG.documentElement.getAttribute("height");
svgRootDoc.setAttribute("zoomAndPan", "disable");
var viewStrCurrentZoom =
document.getElementById('viewComboBox').value;
viewZoom(viewStrCurrentZoom);
}
catch(e) {
if (e.description == null) {alert("Exception: " +
e.message); }
else { alert("Exception: " + e.description); }
}
}
function viewZoom(zoomValue) {
try {
if (zoomValue == "Fit") {
document.viewSvg.width = "100%";
document.viewSvg.height =
parseInt(currentHeight)+100;
return;
}
var z = parseInt(zoomValue) / 10.0;
document.viewSvg.width = parseInt(currentWidth) * z;
document.viewSvg.height = parseInt(currentHeight)*z/10;
}
catch(e) {
if (e.description == null) {alert("Exception: " +
e.message); }
else { alert("Exception: " + e.description); }
}
}
function initCoalitionModel() {
try {
var coalitionSvgDoc =
document.coalitionSvg.getSVGDocument();
var coalitionSvgRootDoc =
coalitionSvgDoc.getRootElement();
var coalitionSvgbBox = coalitionSvgRootDoc.getBBox();
if(blnInitial3) {
blnInitial3 = false;
coalitionSvgRootDoc.setAttribute("viewBox",
(coalitionSvgbBox.x - 5) + " " + (coalitionSvgbBox.y - 50) + " " +
(coalitionSvgbBox.width + 50) + " " + (coalitionSvgbBox.height - 350));
coalitionSvgRootDoc.setAttribute("preserveAspectRatio", "xMinYMin");
}
initCoalitionControl(coalitionSvgDoc, coalitionSvgbBox);
}
catch (e) {
}
}
function initCoalitionControl(doc, bBox) {
try {
var svgDoc = doc;
var svgRootDoc = svgDoc.rootElement;
svgRootDoc.controlFrame = this;
this.bBox = svgRootDoc.createSVGRect();
this.bBox.x = bBox.x;
this.bBox.y = bBox.y;
this.bBox.width = bBox.width;
this.bBox.height = bBox.height;
var docSVG = document.coalitionSvg.getSVGDocument();
currentWidth =
docSVG.documentElement.getAttribute("width");
currentHeight =
docSVG.documentElement.getAttribute("height");
svgRootDoc.setAttribute("zoomAndPan", "disable");
var strCurrentZoom =
document.getElementById('coalitionComboBox').value;
coalitionZoom(strCurrentZoom);
}
catch(e) {
if (e.description == null) {alert("Exception: " +
e.message); }
else { alert("Exception: " + e.description); }
}
}
function coalitionZoom(zoomValue) {
try {
if (zoomValue == "Fit") {
document.coalitionSvg.width = "100%";
document.coalitionSvg.height =
parseInt(currentHeight)+100;
return;
}
var z = parseInt(zoomValue) / 10.0;
document.coalitionSvg.width = parseInt(currentWidth) *
z;
document.coalitionSvg.height =
parseInt(currentHeight)*z/10;
}
catch(e) {
if (e.description == null) {alert("Exception: " +
e.message); }
else { alert("Exception: " + e.description); }
}
}
Re: Svg doubt
Posted by Andreas Neumann <ne...@karto.baug.ethz.ch>.
hi,
I think you posted your question to the wrong group. Batik is not a HTML
browser. How did you manage to open your HTML file in Batik? Are you
talking about problems with Adobe SVG Viewer embedded into Internet
Explorer? If yes, please post your message to the yahoogroups
(http://groups.yahoo.com/group/svg-developers/) - also - if you post
there - it helps if you provide a complete example. Not just code
snippets. You can post a URL to your example - that helps to better
understand your problem.
Andreas
Sreedharan, Vijesh wrote:
> Hi batik users,
>
> I have a question.
>
> I have a html document which embeds 3 svg's. I am creating zoom
> functions for the all the three svg's. Although the zoom function for
> each of them is working individually, there is a small bug in it which
> I am not able to understand. When I resize the first image to a higher
> size, the second and third image also resizes (not really resizes, but
> then it fits to the page as the page is now having scroll bars). Is
> there any way that I can freeze the first and second image while I
> zoom/unzoom the third one?
>
> Following is the code for my js file. I have three svg files,
> internalSvg, viewSvg and coalitionSvg. I could not manage to find the
> error, hence I had put the three into 3 individual methods. For e.g.
> In my html page, I have 3 comboboxes with different values and on
> change for the combobox, it would call the/ initInternalModel()/
> method, which would call the/ initInternalControl()/ method and that
> would call the/ internalZoom()/ method. This is same with the other
> two combo boxes as well.
>
> I hope someone could give me a hand with this. Any help would be
> appreciated.
>
> Regards,
>
> Vijesh
>
> var blnInitial = true;
> var blnInitial2 = true;
> var blnInitial3 = true;
> var currentWidth = 0;
> var currentHeight = 0;
>
> function initInternalModel() {
> try {
>
> var internalSvgDoc =
> document.internalSvg.getSVGDocument();
> var internalSvgRootDoc = internalSvgDoc.getRootElement();
> var internalSvgbBox =
> internalSvgRootDoc.getBBox();
> if(blnInitial2) {
> blnInitial2 = false;
> internalSvgRootDoc.setAttribute("viewBox",
> (internalSvgbBox.x - 5) + " " + (internalSvgbBox.y - 50) + " " +
> (internalSvgbBox.width + 50) + " " + (internalSvgbBox.height - 350));
>
>
> internalSvgRootDoc.setAttribute("preserveAspectRatio", "xMinYMin");
>
> }
> initInternalControl(internalSvgDoc, internalSvgbBox);
> }
> catch (e) {
> }
> }
>
> function initInternalControl(doc, bBox) {
> try {
> var svgDoc = doc;
> var svgRootDoc = svgDoc.rootElement;
> svgRootDoc.controlFrame = this;
> this.bBox = svgRootDoc.createSVGRect();
> this.bBox.x = bBox.x;
> this.bBox.y = bBox.y;
> this.bBox.width = bBox.width;
> this.bBox.height = bBox.height;
>
> var docSVG = document.internalSvg.getSVGDocument();
> currentWidth =
> docSVG.documentElement.getAttribute("width");
> currentHeight =
> docSVG.documentElement.getAttribute("height");
> svgRootDoc.setAttribute("zoomAndPan", "disable");
> var strCurrentZoom =
> document.getElementById('internalComboBox').value;
> internalZoom(strCurrentZoom);
> }
> catch(e) {
> if (e.description == null) {alert("Exception: " +
> e.message); }
> else { alert("Exception: " + e.description); }
> }
> }
>
> function internalZoom(zoomValue) {
> try {
> if (zoomValue == "Fit") {
> document.internalSvg.width = "100%";
> document.internalSvg.height =
> parseInt(currentHeight)+100;
> return;
> }
> var z = parseInt(zoomValue) / 10.0;
> document.internalSvg.width = parseInt(currentWidth) * z;
> document.internalSvg.height =
> parseInt(currentHeight)*z/10;
> }
> catch(e) {
> if (e.description == null) {alert("Exception: " +
> e.message); }
> else { alert("Exception: " + e.description); }
> }
> }
>
> function initViewModel() {
> try {
>
> var viewSvgDoc = document.viewSvg.getSVGDocument();
> var viewSvgRootDoc = viewSvgDoc.getRootElement();
> var viewSvgbBox = viewSvgRootDoc.getBBox();
> if(blnInitial) {
> blnInitial = false;
> viewSvgRootDoc.setAttribute("viewBox",
> (viewSvgbBox.x - 5) + " " + (viewSvgbBox.y - 50) + " " +
> (viewSvgbBox.width + 50) + " " + (viewSvgbBox.height - 350));
>
>
> viewSvgRootDoc.setAttribute("preserveAspectRatio", "xMinYMin");
> }
> initViewControl(viewSvgDoc, viewSvgbBox);
> }
> catch (e) {
> }
> }
>
> function initViewControl(doc, bBox) {
> try {
> var svgDoc = doc;
> var svgRootDoc = svgDoc.rootElement;
> svgRootDoc.controlFrame = this;
> this.bBox = svgRootDoc.createSVGRect();
> this.bBox.x = bBox.x;
> this.bBox.y = bBox.y;
> this.bBox.width = bBox.width;
> this.bBox.height = bBox.height;
>
> var viewDocSVG = document.viewSvg.getSVGDocument();
> currentWidth =
> viewDocSVG.documentElement.getAttribute("width");
> currentHeight =
> viewDocSVG.documentElement.getAttribute("height");
> svgRootDoc.setAttribute("zoomAndPan", "disable");
> var viewStrCurrentZoom =
> document.getElementById('viewComboBox').value;
> viewZoom(viewStrCurrentZoom);
> }
> catch(e) {
> if (e.description == null) {alert("Exception: " +
> e.message); }
> else { alert("Exception: " + e.description); }
> }
> }
>
> function viewZoom(zoomValue) {
> try {
> if (zoomValue == "Fit") {
> document.viewSvg.width = "100%";
> document.viewSvg.height =
> parseInt(currentHeight)+100;
> return;
> }
> var z = parseInt(zoomValue) / 10.0;
> document.viewSvg.width = parseInt(currentWidth) * z;
> document.viewSvg.height = parseInt(currentHeight)*z/10;
> }
> catch(e) {
> if (e.description == null) {alert("Exception: " +
> e.message); }
> else { alert("Exception: " + e.description); }
> }
> }
>
> function initCoalitionModel() {
> try {
> var coalitionSvgDoc =
> document.coalitionSvg.getSVGDocument();
> var coalitionSvgRootDoc =
> coalitionSvgDoc.getRootElement();
> var coalitionSvgbBox =
> coalitionSvgRootDoc.getBBox();
> if(blnInitial3) {
> blnInitial3 = false;
> coalitionSvgRootDoc.setAttribute("viewBox",
> (coalitionSvgbBox.x - 5) + " " + (coalitionSvgbBox.y - 50) + " " +
> (coalitionSvgbBox.width + 50) + " " + (coalitionSvgbBox.height - 350));
>
>
> coalitionSvgRootDoc.setAttribute("preserveAspectRatio", "xMinYMin");
> }
> initCoalitionControl(coalitionSvgDoc, coalitionSvgbBox);
> }
> catch (e) {
> }
> }
>
> function initCoalitionControl(doc, bBox) {
> try {
> var svgDoc = doc;
> var svgRootDoc = svgDoc.rootElement;
>
> svgRootDoc.controlFrame = this;
> this.bBox = svgRootDoc.createSVGRect();
> this.bBox.x = bBox.x;
> this.bBox.y = bBox.y;
> this.bBox.width = bBox.width;
> this.bBox.height = bBox.height;
>
> var docSVG = document.coalitionSvg.getSVGDocument();
> currentWidth =
> docSVG.documentElement.getAttribute("width");
> currentHeight =
> docSVG.documentElement.getAttribute("height");
> svgRootDoc.setAttribute("zoomAndPan", "disable");
> var strCurrentZoom =
> document.getElementById('coalitionComboBox').value;
> coalitionZoom(strCurrentZoom);
> }
> catch(e) {
> if (e.description == null) {alert("Exception: " +
> e.message); }
> else { alert("Exception: " + e.description); }
> }
> }
>
> function coalitionZoom(zoomValue) {
> try {
> if (zoomValue == "Fit") {
> document.coalitionSvg.width = "100%";
> document.coalitionSvg.height =
> parseInt(currentHeight)+100;
> return;
> }
> var z = parseInt(zoomValue) / 10.0;
> document.coalitionSvg.width = parseInt(currentWidth)
> * z;
> document.coalitionSvg.height =
> parseInt(currentHeight)*z/10;
> }
> catch(e) {
> if (e.description == null) {alert("Exception: " +
> e.message); }
> else { alert("Exception: " + e.description); }
> }
> }
>
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org