Re: [xsl] Merging multiple SVGs using XSLT

[Wendell Piez <wapiez@xxxxxxxxxxxxxxxx>]

Yatin,

I'm not sure exactly what the problem is, given your problem statement, but 
a bit of clarification of terminology and syntax might be helpful, given 
your warnings....

One funny wrinkle about XSLT -- really about the XPath data model which 
XSLT operates on -- is that what we call the "root element" in XML is not 
the "root". Accordingly, XSLTers will often take pains to speak not of the 
root element but of the "document element". This document element -- in an 
SVG file it's the top-level <svg> element -- is actually a child of the 
XPath document root, which is referred to with the XPath expression "/". 
(If you have any comments or such before your document starts or after it 
ends, they're also children of the root.)

So when you have a template that matches "/", it's not matching an <svg> 
element, it's matching the document root, which has that <svg> element as a 
child.

Inside your template matching "/" you create an SVG, and then have the 
instruction <xsl:copy-of select="*[..]"/>. This is the same as select="*" 
(the predicate [..] adds nothing in this case, it's true for any node in 
the set "*"), which is the same as select="child::*" -- that is, you are 
asking for copies of the element children of your current node, the root (/).

There is one child element of the root, namely the <svg> element -- the 
document element of your source. So it's getting copied -- and then you are 
adding your new SVGs. This is why you aren't seeing any nesting.

I bet if you changed the template to match="/svg" or match="/*" (that is, 
the template should match the document element, not the document root), 
your stylesheet would work better for you. (There are other improvements 
that can be made, but they don't have a direct bearing on your question. :-)

The key here, as you intuited correctly, is to understand the core concepts 
of the XPath node tree, the nodes in it (including the root node), and how 
XSLT templates are used to match those nodes and XSLT instructions are used 
to manipulate them. If you dig into some documentation on this topic in 
your favorite reference, you are bound to have an "aha!" or two.

I hope this helps--

Cheers,
Wendell

At 04:50 PM 11/7/2003, you wrote:
> Hi Friends,
>           This is my first mail to this
> mailing-list... I am new to XSL, but quite amazed by
> it's capabilities and power.
>           I am trying to merge multiple SVG files into
> a single composite SVG using XSLT. The scenario is
> something like this:
>           I have a main background SVG file, which has
> a root node as the <svg id="backgrnd" width="200"
> height="400"...etc..  </svg>... Onto this SVG I need
> to add multiple smaller SVG files, however I cannot
> add them as <image> tags due to some problems
> downstream of the application. So, I am adding these
> SVG images onto my background SVG by adding the new
> SVG trees into the background SVG. So the final result
> I seek is:
> <svg id="backgrnd" width="200" height="400" etc..>
>   <path...>
>   <clip..>
>   <g..>
>   some more SVG tags for the background
>   <svg id="img1" x="20" y="40" width="200"...>
>     ..... Image on the background
>   </svg>
>   <svg id="img2" x="30" y="69" width="200"...>
>     ..... another image on the background
>   </svg>
>     ...there can be n number of images like these
>
> </svg>... finally the closure of the root of the
> background SVG.
>
> i.e. I am trying to add the img1 and img2 images
> within the root of the background SVG tree... However
> I notice that I am unable to add anything into the
> root of the background SVG.. The result I get is
> following:
> <svg id="backgrnd" width="200" height="400" etc..>
>   <path...>
>   <clip..>
>   <g..>
>   some more SVG tags on for the background
> </svg>... finally the closure of the root of the
> background SVG.
> <svg id="img1" x="20" y="40" width="200"...>
>     ..... Image on the background
>   </svg>
>   <svg id="img2" x="30" y="69" width="200"...>
>     ..... another image on the background
>   </svg>
>     ...there can be n number of images like these
>
> i.e. The images img1 and img2 get added as new nodes
> at the same level as the root of the background SVG...
>
> Following is the XSL code I am using...
>
> <xsl:stylesheet version="1.0"
> xmlns:xsl="http://www.w3.org/1999/XSL/Transform";>
>
>
>
>         <xsl:template match="/">
>                 <svg xmlns="http://www.w3.org/2000/svg";
> xmlns:svg="http://www.w3c.org/2000/svg"; width="1656"
> height="2088" viewBox="0 0 1656 2088">
> <xsl:copy-of select="*[..]"/>
>                 <xsl:for-each select="/">
>
>
>
>                                 <xsl:if test="position()=last()">
>                                         <svg 
> xmlns="http://www.w3.org/2000/svg";
> xmlns:svg="http://www.w3c.org/2000/svg"; x="456"
> y="420" width="748" height="224">
>                                         <xsl:copy-of
> select="document('http://10.96.10.20/servlet/ImageReaderByNIDQ?nacid=119476&amp;filetype=f')"/>
>                                         </svg>
>
>                                         <svg 
> xmlns="http://www.w3.org/2000/svg";
> xmlns:svg="http://www.w3c.org/2000/svg"; x="396"
> y="756" width="864" height="540">
>                                         <xsl:copy-of
> select="document('http://10.96.10.20/servlet/ImageReaderByNIDQ?nacid=119480&amp;filetype=f')"/>
>                                         </svg>
>                                 </xsl:if>
>
>
>                 </xsl:for-each>
>                 </svg>
>         </xsl:template>
>
>
> </xsl:stylesheet>
>
> As you will notice, I am adding new SVG tags in the
> above XSL to overcome my problem (and encapsulate
> everything into the same top level <svg>), but this
> causes some problems further in the application.
>
> Being a novice, I apologize for any incorrect use of
> terms like root node, or tree etc...
>
> I would appreciate any help with this matter...
>
> Thank you,
> Yatin Kareer.
>
> __________________________________
> Do you Yahoo!?
> Protect your identity with Yahoo! Mail AddressGuard
> http://antispam.yahoo.com/whatsnewfree
>
>  XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list


======================================================================
Wendell Piez                            mailto:wapiez@xxxxxxxxxxxxxxxx
Mulberry Technologies, Inc.                http://www.mulberrytech.com
17 West Jefferson Street                    Direct Phone: 301/315-9635
Suite 207                                          Phone: 301/315-9631
Rockville, MD  20850                                 Fax: 301/315-8285
----------------------------------------------------------------------
  Mulberry Technologies: A Consultancy Specializing in SGML and XML
======================================================================


XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list