Re: Printing a webpage containing SVG

loretta <[email protected]> Mon, 26 Oct 2009 07:01:31 -0700 (PDT)
Newsgroups	gmane.comp.mozilla.devel.svg
Organization	http://groups.google.com
Message-ID	<58365372-b48b-4423-8533-db37278a58b7@m11g2000vbl.googlegroups.com>
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>

 <table width="80%" cellspacing="0" cellpadding="0" border="0">
 <tr>
 <td width="30%"><table border="1" width="100%" id="tbl">
 <tr id="r1"><td>Row 1</td></tr>
 <tr><td id="r2">Row 2</td></tr>
 <tr><td id="r3">Row 3</td></tr>
 </table></td>
 <td width="30%"><table id="tbl2" width="100%" cellspacing="0"
cellpadding="0" border="0">

 <tr><td id="lines">
 </td></tr></table></td>
 <td width="30%"><table border="1" width="100%">
 <tr><td id="l1">Row 1</td></tr>
 <tr><td id="l2">Row 2</td></tr>
 <tr><td id="l3">Row 3</td></tr>
 </table>

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