Printing a webpage containing SVG

loretta

unread,

Oct 22, 2009, 3:32:27 PM10/22/09

to

I have SVG as part of a webpage. The SVG element is appended to a
table cell. On Firefox 3.5.1 the page is displaying fine but when I
print using File->Print, the output has the SVG graphics overlapping
the other html elements. Why does print not result in what I am seeing
in the browser? How can I print a page containing SVG from Firefox? I
don't see anyone else with this problem so it may be how I have my
html set up. Thanks for any help.
Loretta

Robert Longson

unread,

Oct 23, 2009, 7:14:15 PM10/23/09

to

https://bugzilla.mozilla.org/show_bug.cgi?id=489924 perhaps? If not
you'll need to provide an example.

Best regards

Robert

loretta

unread,

Oct 26, 2009, 10:01:31 AM10/26/09

to

I copied an example of where the problem is occurring. I have 3 tables
that are in table cells of an outer table. Table 1 has 3 rows with
text. Table 2 has the svg canvas. Table 3 has 3 rows with text. There
is a line drawn by svg between table 1, row1 and table 3, row 1. The
line is drawn correctly but if use File->Print or File->Print Preview,
the line extends into table 3 and is not what I am seeing on the
webpage.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG Demo</title>
<style>
table { padding: 0px; margin: 0px; }
</style>
<script>
function init() {
var tbl = document.getElementById("tbl");
var tbl2 = document.getElementById("tbl2");
// Make a canvas with width equal to width of middle table and
height
// equal to first table
var canvas = makeCanvas("canvas",
tbl2.offsetWidth,tbl.offsetHeight,
tbl2.offsetWidth, tbl.offsetHeight);
var lines = document.getElementById("lines");
lines.appendChild(canvas);
draw();
}
function draw() {
// Now create a line
var canvas = document.getElementById("canvas");

// Need to get x and y of table cells - y will be the height of
row 1
// to make a line between bottom of row 1 in table 1 and row 1 in
table 3
var r = document.getElementById("r1");
var l = document.getElementById("tbl2");
drawLine(canvas, 0, r.offsetHeight, l.offsetWidth, r.offsetHeight,
"red", "2");

}
// Create and return an empty svg element
// Note that the element is not added to the document.
function makeCanvas(id, pixelWidth, pixelHeight,
userWidth,userHeight) {
// SVG related namespace URLs
ns = "http://www.w3.org/2000/svg";
xlinkns = "http://www.w3.org/1999/xlink";

var svg = document.createElementNS(ns, "svg:svg");
svg.setAttribute("id", id);
// Canvas size in pixels
svg.setAttribute("width", pixelWidth);
svg.setAttribute("height", pixelHeight);
// Define XLink namespace that SVG uses
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
xlinkns);

return svg;
}

function drawLine(canvas, x1, y1, x2, y2, color, size) {
if (typeof canvas == "string") canvas = document.getElementById
(canvas);
if (canvas == null) return;

ns = "http://www.w3.org/2000/svg";
var line = document.createElementNS(ns, "line");
line.setAttribute("x1", x1);
line.setAttribute("y1", y1);
line.setAttribute("x2", x2);
line.setAttribute("y2", y2);
line.setAttribute("stroke",color);
line.setAttribute("stroke-width",size);

canvas.appendChild(line);
}
</script>
</head>
<body onload="init()">
<span style="text-align: center; font-weight: bold">SVG Demo</span>

</td></tr></table>
</body>
</html>

HelderMagalhaes

unread,

Nov 3, 2009, 12:45:59 PM11/3/09

to

Hi loretta

> I copied an example of where the problem is occurring.

Unfortunately, the imposed like breaking somehow messed up your
example. When copy+pasting, one needs to manually revert them... :-(

> The
> line is drawn correctly but if use File->Print or File->Print Preview,
> the line extends into table 3 and is not what I am seeing on the
> webpage.

I've confirmed the symptom on Windows using a nightly build [1] and
also the previous version [2], so this is not a regression from the
3.5.x branch. ;-)

Hope this helps,
Helder

[1] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a1pre)
Gecko/20091103 Minefield/3.7a1pre (.NET CLR 3.5.30729)
[2] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.15) Gecko/
2009101601 Firefox/3.0.15 (.NET CLR 3.5.30729)