XSLT rounding attributes for SVG optimization - xslt

I need to reduce the numeric precision, and minimum exponent of SVG attributes to save space.
Input:
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250">
<circle cx="125.1111" cy="125.2222" r="124.9999" fill="red"/>
</svg>
Output:
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250">
<circle cx="125.1" cy="125.2" r="125.0" fill="red"/>
</svg>
What stylesheet will achieve the result?
Any thoughts on the safety of this?

This stylesheet:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="node()|#*">
<xsl:copy>
<xsl:apply-templates select="node()|#*"/>
</xsl:copy>
</xsl:template>
<xsl:template match="#*[.=number()]">
<xsl:attribute name="{name()}">
<xsl:value-of select="format-number(.,'#.#')"/>
</xsl:attribute>
</xsl:template>
</xsl:stylesheet>
Output:
<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg">
<circle cx="125.1" cy="125.2" r="125" fill="red"></circle>
</svg>

On the applicability:
Without proper analysis it's not going to work for all cases, but it usually works fine to chop off some decimals and hoping for the best. Truncating to one decimal in gradients (usually defined in objectBoundingBox space) can give poor results, same with other places using objectBoundingBox units (such attribute values are usually in the range [0..1]). Anything else mostly depends on the current transform (CTM) and what 'viewBox' is used on the root svg element.

Related

XSLT: Add attribute to last given element of SVG image

How can I add the attribute stroke="red" to the last occurence of the circle tag ?
My SVG example is like this:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-900 -900 1800 1800" width="1800" height="1800">
<circle r="20" stroke="#343434" stroke-width="10"/>
<g stroke="#77868b" stroke-width="8" fill="none">
<circle id="o4" r="600"/>
<circle id="o5" r="700"/>
<circle id="o6" r="800" />
<g stroke-width="60" stroke-linecap="round" transform="rotate(90)">
<circle id="e4" r="600" stroke-dasharray="1,116.75"/>
<circle id="e5" r="700" stroke-dasharray="1,365.5"/>
<circle id="e6" r="800" stroke-dasharray="1,2512.25"/>
</g>
</g>
</svg>
When I use the following XSLT template, I get three circles with stroke="red" instead of the last one only.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl='http://www.w3.org/1999/XSL/Transform' xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:svg="http://www.w3.org/2000/svg" version='1.0'>
<!-- this template is applied by default to all nodes and attributes -->
<xsl:template match="#*|node()">
<!-- just copy all my attributes and child nodes, except if there's a better template for some of them -->
<xsl:copy>
<xsl:apply-templates select="#*|node()"/>
</xsl:copy>
</xsl:template>
<!-- this template is applied to a path node that doesn't have a fill attribute -->
<xsl:template match="svg:circle[not(#stroke)][last()]">
<!-- copy me and my attributes and my subnodes, applying templates as necessary, and add a fill attribute set to red -->
<xsl:copy>
<xsl:apply-templates select="#*|node()"/>
<xsl:attribute name="stroke">red</xsl:attribute>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
Adding g/ to my template like this <xsl:template match="svg:g/circle[not(#stroke)][last()]"> fixed my issue.

viewing svg sprites with xslt

My team's designer has us using SVG "sprites" in our application. I'm want to be able to see all the available images. I was going to parse the XML and build something on the back end but then I thought about XSLT. I'd like to have an XSLT file that parses the SVG and creates a list of images. I'm close to getting it... here's what I have.
Sample SVG (although I also tried the sample file in the post):
<?xml-stylesheet type="text/xsl" href="/pages/sprites.xslt" ?>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="fitness" viewBox="0 0 64 64">
<g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(5 3)" stroke-linecap="square">
<path d="M5.8,27.0664159 L5.8,10.6333223 C5.8,4.7607008 10.5607008,0 16.4333223,0 L16.4333445,0 C22.3059668,0 27.0666667,4.7607008 27.0666667,10.6333223 L27.0666667,47.3666778 C27.0666667,53.2393002 31.8273665,58 37.699989,58 L37.7000111,58 C43.5726335,58 48.3333333,53.2393002 48.3333333,47.3666777 L48.3333333,30.9333333"/>
<polygon points="11.6 50.267 11.6 47.367 9.667 44.467 9.667 32.867 11.6 29.967 11.6 27.067 0 27.067 0 29.967 1.933 32.867 1.933 44.467 0 47.367 0 50.267"/>
<polygon points="54.133 30.933 54.133 28.033 52.2 25.134 52.2 13.533 54.133 10.633 54.133 7.733 42.533 7.733 42.533 10.633 44.467 13.533 44.467 25.134 42.533 28.033 42.533 30.933"/>
</g>
</symbol>
</defs>
</svg>
and the XSLT file found here:
How can I show all symbols in an SVG file?
It mostly works... it creates all the dom objects I'm expecting out of the box, which is pretty amazing. But inside use I get:
#shadow-root (closed)
which is what we see in our actual app... but in our app, the image is nested inside the shadow-root. But in this version, it's empty. Seems basically the same as how we're doing it on the app side. What's the issue?
Instead of loading the symbols from a file, write them into the output and reference locally.
Aditionally, you need to define a size for the used elements (the default would be 100%). As position() is one-based, subtract one to start top-left with the display.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns="http://www.w3.org/2000/svg"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<xsl:template match="/">
<svg>
<xsl:copy>
<xsl:copy-of select="//svg:defs"/>
</xsl:copy>
<g stroke="black" fill="black">
<xsl:for-each select="//svg:symbol">
<use width="32" height="32">
<xsl:attribute name="x"><xsl:value-of select="(position()-1) mod 10 * 32"/></xsl:attribute>
<xsl:attribute name="y"><xsl:value-of select="floor((position()-1) div 10) * 32"/></xsl:attribute>
<xsl:attribute name="xlink:href">#<xsl:value-of select="#id"/></xsl:attribute>
</use>
</xsl:for-each>
</g>
</svg>
</xsl:template>
</xsl:stylesheet>

XSLT 2.0: Transform notation in plain text to svg

I am new to transformations between different formats. My goal is to transfer a notation from a toolkit which is in a plain text format to svg. An easy example would be that I have an orange ellipse and the notation would be like this (x and y is the coordinate system so 0 and 0 means the ellipse is in the middle):
GRAPHREP
PEN color:$000000 w:2pt
FILL color:$ff7f00
ELLIPSE x:0pt y:0pt rx:114pt ry:70pt
and my desired output would be an svg code something like this(the cx and cy coordinate are randomly selected for the example):
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g>
<ellipse fill="#ff7f00" stroke="#000000" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="250" cy="250" id="svg_1" rx="114" ry="70"/>
</g>
</svg>
I found these two threads Parse text file with XSLT and XSL transform on text to XML with unparsed-text: need more depth
where they transform plain text to xml with XSLT 2.0 and the unparsed-text() function and regex. In my example how would it be possible to get the commands like ELLIPSE(is a
regex which recognizes the all uppercase words possible?) and the parameters(is it possible to get with Xpath from plain text anyhow?)? Is a good implementation doable in XSLT 2.0 or should I
look for another method? Any help would be appreciated!
Below is an example of how you can load the text file using unparsed-text(), and parse the content using xsl:analyze-text to produce an intermediate XML document, and then transform that XML using a "push"-style stylesheet.
It shows an example of how to support ELLIPSE, CIRCLE and RECTANGLE text conversion. You may need to customize it a bit, but should give you an idea of what is possible. With the addition of regex and unparsed-text(), XSLT 2.0 and 3.0 makes all sorts of text transformations possible that would have been extremely cumbersome or difficult in XSLT 1.0.
With a file called "drawing.txt" with the following content:
GRAPHREP
PEN color:$000000 w:2pt
FILL color:$ff7f00
ELLIPSE x:0pt y:0pt rx:114pt ry:70pt
GRAPHREP
PEN color:$000000 w:2pt
FILL color:$ff7f00
CIRCLE x:0pt y:0pt rx:114pt ry:70pt
GRAPHREP
PEN color:$000000 w:2pt
FILL color:$ff7f00
RECTANGLE x:0pt y:0pt width:114pt height:70pt
Executing the following XSLT in the same directory:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:local="local"
exclude-result-prefixes="xs"
version="2.0"
xmlns:svg="http://www.w3.org/2000/svg">
<xsl:output indent="yes"/>
<!--matches sequences of UPPER-CASE letters -->
<xsl:variable name="label-pattern" select="'[A-Z]+'"/>
<!--matches the "attributes" in the line i.e. w:2pt,
has two capture groups (1) => attribute name, (2) => attribute value -->
<xsl:variable name="attribute-pattern" select="'\s?(\S+):(\S+)'"/>
<!--matches a line of data for the drawing text,
has two capture groups (1) => label, (2) attribute data-->
<xsl:variable name="line-pattern" select="concat('(', $label-pattern, ')\s(.*)\n?')"/>
<xsl:template match="#* | node()">
<xsl:copy>
<xsl:apply-templates select="#* | node()"/>
</xsl:copy>
</xsl:template>
<xsl:template match="/">
<svg width="400" height="400">
<g>
<!-- Find the text patterns indicating the shape -->
<xsl:analyze-string select="unparsed-text('drawing.txt')"
regex="{concat('(', $label-pattern, ')\n((', $line-pattern, ')+)\n?')}">
<xsl:matching-substring>
<!--Convert text to XML -->
<xsl:variable name="drawing-markup" as="element()">
<!--Create an element for this group, using first matched pattern as the element name
(i.e. GRAPHREP => <GRAPHREP>) -->
<xsl:element name="{regex-group(1)}">
<!--split the second matched group for this shape into lines by breaking on newline-->
<xsl:variable name="lines" select="tokenize(regex-group(2), '\n')"/>
<xsl:for-each select="$lines">
<!--for each line, run through this process to create an element with attributes
(e.g. FILL color:$frf7f00 => <FILL color=""/>
-->
<xsl:analyze-string select="." regex="{$line-pattern}">
<xsl:matching-substring>
<!--create an element using the UPPER-CASE label starting the line -->
<xsl:element name="{regex-group(1)}">
<!-- capture each of the attributes -->
<xsl:analyze-string select="regex-group(2)" regex="\s?(\S+):(\S+)">
<xsl:matching-substring>
<!--convert foo:bar into attribute foo="bar",
translate $ => #
and remove the letters 'p' and 't' by translating into nothing"-->
<xsl:attribute name="{regex-group(1)}" select="translate(regex-group(2), '$pt', '#')"/>
</xsl:matching-substring>
<xsl:non-matching-substring/>
</xsl:analyze-string>
</xsl:element>
</xsl:matching-substring>
<xsl:non-matching-substring/>
</xsl:analyze-string>
</xsl:for-each>
</xsl:element>
</xsl:variable>
<!--Uncomment the copy-of below if you want to see the intermediate XML $drawing-markup-->
<!--<xsl:copy-of select="$drawing-markup"/>-->
<!-- Transform XML into SVG -->
<xsl:apply-templates select="$drawing-markup"/>
</xsl:matching-substring>
<xsl:non-matching-substring/>
</xsl:analyze-string>
</g>
</svg>
</xsl:template>
<!--==========================================-->
<!-- Templates to convert the $drawing-markup -->
<!--==========================================-->
<!--for supported shapes, create the element using
lower-case value, and change rectangle to rect
for the svg element name-->
<xsl:template match="GRAPHREP[ELLIPSE | CIRCLE | RECTANGLE]">
<xsl:element name="{replace(lower-case(local-name(ELLIPSE | CIRCLE | RECTANGLE)), 'rectangle', 'rect', 'i')}">
<xsl:attribute name="id" select="concat('id_', generate-id())"/>
<xsl:apply-templates />
</xsl:element>
</xsl:template>
<xsl:template match="ELLIPSE | CIRCLE | RECTANGLE"/>
<!-- Just process the content of GRAPHREP.
If there are multiple shapes and you want a new
<svg><g></g></svg> for each shape,
then move it from the template for "/" into this template-->
<xsl:template match="GRAPHREP/*">
<xsl:apply-templates select="#*"/>
</xsl:template>
<xsl:template match="PEN" priority="1">
<!--TODO: test if these attributes exist, if they do, do not create these defaults.
Hard-coding for now, to match desired output, since I don't know what the text
attributes would be, but could wrap each with <xsl:if test="not(#dasharray)">-->
<xsl:attribute name="stroke-dasharray" select="'null'"/>
<xsl:attribute name="stroke-linjoin" select="'null'"/>
<xsl:attribute name="stroke-linecap" select="'null'"/>
<xsl:apply-templates select="#*"/>
</xsl:template>
<!-- conterts #color => #stroke -->
<xsl:template match="PEN/#color">
<xsl:attribute name="stroke" select="."/>
</xsl:template>
<!--converts #w => #stroke-width -->
<xsl:template match="PEN/#w">
<xsl:attribute name="stroke-width" select="."/>
</xsl:template>
<!--converts #color => #fill and replaces $ with # -->
<xsl:template match="FILL/#color">
<xsl:attribute name="fill" select="translate(., '$', '#')"/>
</xsl:template>
<!-- converts #x => #cx with hard-coded values.
May want to use value from text, but matching your example-->
<xsl:template match="ELLIPSE/#x | ELLIPSE/#y">
<!--not sure if there was a relationship between ELLIPSE x:0pt y:0pt, and why 0pt would be 250,
but just an example...-->
<xsl:attribute name="c{name()}" select="250"/>
</xsl:template>
</xsl:stylesheet>
Produces the following SVG output:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:local="local"
xmlns:svg="http://www.w3.org/2000/svg"
width="400"
height="400">
<g>
<ellipse id="id_d2e0"
stroke-dasharray="null"
stroke-linjoin="null"
stroke-linecap="null"
stroke="#000000"
stroke-width="2"
fill="#ff7f00"
cx="250"
cy="250"
rx="114"
ry="70"/>
<circle id="id_d3e0"
stroke-dasharray="null"
stroke-linjoin="null"
stroke-linecap="null"
stroke="#000000"
stroke-width="2"
fill="#ff7f00"
x="0"
y="0"
rx="114"
ry="70"/>
<rect id="id_d4e0"
stroke-dasharray="null"
stroke-linjoin="null"
stroke-linecap="null"
stroke="#000000"
stroke-width="2"
fill="#ff7f00"
x="0"
y="0"
width="114"
height="70"/>
</g>
</svg>

With XSLT, how can I process normally, but hold some nodes until the end and then output them all at once (e.g. footnotes)?

I have an XSLT application which reads the internal format of Microsoft Word 2007/2010 zipped XML and translates it into HTML5 with XSLT. I am investigating how to add the ability to optionally read OpenOffice documents instead of MSWord.
Microsoft stores XML for footnote text separately from the XML of the document text, which happens to suit me because I want the footnotes in a block at the end of the output HTML page.
However, unfortunately for me, OpenOffice puts each footnote right next to its reference, inline with the text of the document. Here is a simple paragraph example:
<text:p text:style-name="Standard">The real breakthrough in aerial mapping
during World War II was trimetrogon
<text:note text:id="ftn0" text:note-class="footnote">
<text:note-citation>1</text:note-citation>
<text:note-body>
<text:p text:style-name="Footnote">Three separate cameras took three
photographs at once, a direct downward and an oblique on each side.</text:p>
</text:note-body>
</text:note>
photography, but the camera was large and heavy, so there were problems finding
the right aircraft to carry it.
</text:p>
My question is, can XSLT process the XML as normal, but hold each of the text:note items until the end of the document text, and then emit them all at one time?
You're thinking of your logic as being driven by the order of things in the input, but in XSLT you need to be driven by the order of things in the output. When you get to the point where you want to output the footnotes, go find the footnote text wherever it might be in the input. Admittedly that doesn't always play too well with the apply-templates recursive descent processing model, which is explicitly input-driven; but nevertheless, that's the way you have to do it.
Don't think of it as "holding" the text:note items, instead simply ignore them in the main pass and then gather them at the end with a //text:note and process them there, e.g.
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
xmlns:text="whateveritshouldbe">
<xsl:template match="#*|node()">
<xsl:copy>
<xsl:apply-templates select="#*|node()" />
</xsl:copy>
</xsl:template>
<!-- normal mode - replace text:note element by [reference] -->
<xsl:template match="text:note">
<xsl:value-of select="concat('[', text:note-citation, ']')" />
</xsl:template>
<xsl:template match="/">
<document>
<xsl:apply-templates select="*" />
<footnotes>
<xsl:apply-templates select="//text:note" mode="footnotes"/>
</footnotes>
</document>
</xsl:template>
<!-- special "footnotes" mode to de-activate the usual text:node template -->
<xsl:template match="#*|node()" mode="footnotes">
<xsl:copy>
<xsl:apply-templates select="#*|node()" mode="footnotes" />
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
You could use <xsl:apply-templates mode="..."/>. I'm not sure on the exact syntax and your use case, but maybe the example below will give you a clue on how to approach your problem.
Basic idea is to process your nodes twice. First iteration would be pretty much the same as now, and the second iteration only looks for footnotes and only outputs those. You differentiate those iteration by setting "mode" parameter.
Maybe this example will give you a clue how to approach your problem. Note that I used different tags that in your code, so the example would be simpler.
XSLT sheet:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml" indent="yes" />
<xsl:template match="doc">
<xml>
<!-- First iteration - skip footnotes -->
<doc>
<xsl:apply-templates select="text" />
</doc>
<!-- Second iteration, extract all footnotes.
'mode' = footnotes -->
<footnotes>
<xsl:apply-templates select="text" mode="footnotes" />
</footnotes>
</xml>
</xsl:template>
<!-- Note: no mode attribute -->
<xsl:template match="text">
<text>
<xsl:for-each select="p">
<p>
<xsl:value-of select="text()" />
</p>
</xsl:for-each>
</text>
</xsl:template>
<!-- Note: mode = footnotes -->
<xsl:template match="text" mode="footnotes">
<xsl:for-each select=".//footnote">
<footnote>
<xsl:value-of select="text()" />
</footnote>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Input XML:
<?xml version="1.0" encoding="UTF-8"?>
<doc>
<text>
<p>
some text
<footnote>footnote1</footnote>
</p>
<p>
other text
<footnote>footnote2</footnote>
</p>
</text>
<text>
<p>
some text2
<footnote>footnote3</footnote>
</p>
<p>
other text2
<footnote>footnote4</footnote>
</p>
</text>
</doc>
Output XML:
<?xml version="1.0" encoding="UTF-8"?>
<xml>
<!-- Output from first iteration -->
<doc>
<text>
<p>some text</p>
<p>other text</p>
</text>
<text>
<p>some text2</p>
<p>other text2</p>
</text>
</doc>
<!-- Output from second iteration -->
<footnotes>
<footnote>footnote1</footnote>
<footnote>footnote2</footnote>
<footnote>footnote3</footnote>
<footnote>footnote4</footnote>
</footnotes>
</xml>

create HTML from a list of XML nodes using XSLT

I am a noob on XSLT.
I have a XML where t nodes are followed by other nodes, and then another t node might appear again followed by nodes again, and so on
<t />
<n1 />
<n2 />
..
<t/>
<n3 />
<n4 />
...
What I need to turn this XML into is a HTML where t nodes wraps all nodes following it up to the next t node
<div class='t'>
<div class='n1'/>
<div class='n2'/>
...
</div>
<div class='t'>
<div class='n3'/>
<div class='n4'/>
...
</div>
I am having a hard time implementing this.
Any ideas \ hints?
Thanks!
This is grouping adjacents. There are many solutions:
Whit this wellformed input:
<root>
<t />
<n1 />
<n2 />
<t/>
<n3 />
<n4 />
</root>
XSLT 1.0: traversing with following axis
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:strip-space elements="*"/>
<xsl:template match="root">
<xsl:copy>
<xsl:apply-templates select="node()[1]" mode="group"/>
<xsl:apply-templates select="t"/>
</xsl:copy>
</xsl:template>
<xsl:template match="t">
<div class="t">
<xsl:apply-templates select="following-sibling::node()[1]"
mode="group"/>
</div>
</xsl:template>
<xsl:template match="t" mode="group"/>
<xsl:template match="node()" mode="group">
<xsl:apply-templates select="."/>
<xsl:apply-templates select="following-sibling::node()[1]"
mode="group"/>
</xsl:template>
<xsl:template match="*[starts-with(name(),'n')]">
<div class="{name()}"/>
</xsl:template>
</xsl:stylesheet>
XSLT 1.0: Keys
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:strip-space elements="*"/>
<xsl:key name="kNodeByMark"
match="node()[../t][not(self::t)]"
use="generate-id((..|preceding-sibling::t[1])[last()])"/>
<xsl:template match="root">
<xsl:copy>
<xsl:apply-templates select="key('kNodeByMark',generate-id())"/>
<xsl:for-each select="t">
<div class="t">
<xsl:apply-templates
select="key('kNodeByMark',generate-id())"/>
</div>
</xsl:for-each>
</xsl:copy>
</xsl:template>
<xsl:template match="*[starts-with(name(),'n')]">
<div class="{name()}"/>
</xsl:template>
</xsl:stylesheet>
XSLT 2.0: for-each-group instruction
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:strip-space elements="*"/>
<xsl:template match="root">
<xsl:copy>
<xsl:apply-templates select="node()[../t[1] >> .]"/>
<xsl:for-each-group select="node()" group-starting-with="t">
<div class="t">
<xsl:apply-templates
select="current-group()[position()>1]"/>
</div>
</xsl:for-each-group>
</xsl:copy>
</xsl:template>
<xsl:template match="*[starts-with(name(),'n')]">
<div class="{name()}"/>
</xsl:template>
</xsl:stylesheet>
Output:
<root>
<div class="t">
<div class="n1" />
<div class="n2" />
</div>
<div class="t">
<div class="n3" />
<div class="n4" />
</div>
</root>
EDIT: Traversing following axis refactored to look like the others solutions. Stripping identity rules.
See my note on your question, regarding "which XSLT version?". If grouping is supported in your target version, see other answers here, as that is easier to understand and will almost certainly perform better on any XSLT processor. If you aren't certain, I recommend going with a 1.0 solution like this one.
You can do it with the "XML fragment" exactly like you posted with most XSLT processors, but I added a "root" element to your XML, to reduce certain unknowns in answering your question.
In this solution below, I've tried to keep a direct correlation between the shape of the XSLT and the shape of the output you desire. In my opinion that makes it easier to maintain/understand, at least for smaller stylesheets.
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/root">
<xsl:for-each select="t">
<div class='t'>
<xsl:for-each select="following-sibling::*[count(preceding-sibling::t)=(count(current()/preceding-sibling::t) + 1) and not(self::t)]">
<div class='{name()}' />
</xsl:for-each>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
The right-hand side of "following-sibling::*[count(preceding-sibling::t)=(count(current()/preceding-sibling::t) + 1) and not(self::t)]" could be simplified, I'm sure, using something like "current()::position()" (which isn't valid, fyi), but I'm rusty and couldn't remember some of the alias syntax.
This basically says: 1) Evaluate every T. 2) Select elements with the same quantity of T preceding them, as the index of the T we are currently evaluating.
Note that you've probably tried iterating through procedurally, and found you can't store the last value found in XSLT. Or you've found that you can, but only with nested templates. This same type of pivot you are performing has many XSLT neophytes hitting roadblocks, so don't feel bad.