Abososmegrees
New Member
In my XML file, I have annotation that represents a physical layout of a printed document, which I would like to visualize using a simple grid drawn in SVG format. The document in question is described using a set of elements, which are exemplified below. To begin with, the area-model element defines the width and height of the document, and how the document is divided vertically (1 row) and horizontally (3 columns). The columns and rows are defined using the hspacing and vspacing attributes, whose values are percentages of the width and height attributes.The initial layout defined in the area-model element is then elaborated using nested sub-area elements, which have similar attributes related to the physical characteristics of the layout. In this case, the first column has a total of nine rows. The location attribute describes where in the parent element the sub-area is located. In the example, the sub-area is located in the first column.\[code\]<area-model> <area-root id="layout" cols="3" rows="1" hspacing="25 25 50" vspacing="100" width="404mm" height="210mm" /> <sub-area id="column-1" location="col-1" cols="1" rows="9" hspacing="100" vspacing="2 8 9 3 3 10 22 39 4" width="101mm" height="210mm"> </sub-area> </area-root></area-model>\[/code\]The expected result would be something along these lines from an SVG that I created using Inkscape:\[code\]<svg> <g id="layout"> <rect y="842" x="0" height="210" width="404" id="area-root" style="fill:none;stroke:#000000;stroke-width:1"/> <rect y="842" x="0" height="210" width="101" id="area-root-col-1" style="fill:none;stroke:#000000;stroke-width:1"/> <rect y="842" x="101" height="210" width="101" id="area-root-col-2" style="fill:none;stroke:#000000;stroke-width:1"/> <path id="column-1-row-1" d="m 0.50493076,847.86029 99.99013924,0" style="fill:none;stroke:#000000;stroke-width:1"/> <path id="column-1-row-2" d="m 0.50243229,869.8569 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/> <path id="column-1-row-3" d="m 0.50243229,888.85128 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/> <path id="column-1-row-4" d="m 0.50243229,894.8495 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/> <path id="column-1-row-5" d="m 0.50243229,900.84772 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/> <path id="column-1-row-6" d="m 0.50243229,921.8415 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/> <path id="column-1-row-7" d="m 0.50243229,963.82907 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/> <path id="column-1-row-8" d="m 0.50243229,1045.8048 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/></g></svg>\[/code\]My question is, how would you use XSLT to transform the XML into an SVG?In my case, the biggest challenge is devising the means to calculate the required measurements (placement, width and height) for the sub-area elements, in order to place them correctly in the columns or rows defined in the area-root element.On the other hand, the path elements in the SVG above could be replaced by overlapping rect elements in the SVG, as long as it reflects the information stored in the XML. Basically, all I require is a visual representation of the XML file.Many thanks in advance! Please let me know if further clarifications are required.