Click to See Complete Forum and Search --> : Can XSLT be used to transform into SVG?


Mr Initial Man
07-13-2009, 05:58 PM
I'm trying an experiment to see if XSLT transforms into HTML alone, but right now, it's not going well.

Below is my stylesheet:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/2000/svg"
xmlns:THR="Thrones"
>
<xsl:template match="/THR:BOARD">
<svg width="615" height="530px">
<title>Thrones Board</title>
<style type="text/css"><![CDATA[
path, circle{
stroke:black;
fill:white;
}
path{stroke-width:2px;}
circle{stroke-width:1px;}

#Throne_1, #Throne_2{fill:rgb(255,255,0);}
#Center{fill:rgb(180,180,180);}
]]></style>
<xsl:for-each select="THR:Tiles">
<path>
<xsl:attribute name="class">
<xsl:text>v_lin-</xsl:text>
<xsl:value-of select="@v_lin" />
<xsl:text> r_lin-</xsl:text>
<xsl:value-of select="@r_lin" />
<xsl:text> l_lin-</xsl:text>
<xsl:value-of select="@l_lin" />
<xsl:text> h_adj-</xsl:text>
<xsl:value-of select="@h_adj" />
<xsl:text> r_adj-</xsl:text>
<xsl:value-of select="@r_adj" />
<xsl:text> l_adj-</xsl:text>
<xsl:value-of select="@l_adj" />
<xsl:text> tring-</xsl:text>
<xsl:value-of select="@tring" />
</xsl:attribute>
<xsl:attribute name="d">
<xsl:text>M +</xsl:text>
<xsl:value-of select="@hrz" />
<xsl:text>, +</xsl:text>
<xsl:value-of select="@vrt" />
<xsl:text> l +013.00, +007.000 v +015.00 l -013.00, +007.000 l -013.00, -007.00 v -015.00 z</xsl:text>
</xsl:attribute>
<xsl:if test="@id">
<xsl:attribute name="id">
<xsl:value-of select="@id" />
</xsl:attribute>
</xsl:if>
</path>
</xsl:for-each>
</svg>
</xsl:template>
</xsl:stylesheet>

Here is some of my XML file:

<BOARD xmlns="Thrones">
<Tiles>
<!-- Row 01 -->
<Tile v_lin="12" r_lin="12" l_lin="01" h_adj="01" r_adj="12" l_adj="01" tring="12" hrz="165" vrt="010" />
<Tile v_lin="14" r_lin="11" l_lin="02" h_adj="01" r_adj="11" l_adj="02" tring="12" hrz="191" vrt="010" />
<Tile v_lin="16" r_lin="10" l_lin="03" h_adj="01" r_adj="10" l_adj="03" tring="12" hrz="217" vrt="010" />
<Tile v_lin="18" r_lin="09" l_lin="04" h_adj="01" r_adj="09" l_adj="04" tring="12" hrz="243" vrt="010" />
<Tile v_lin="20" r_lin="08" l_lin="05" h_adj="01" r_adj="08" l_adj="05" tring="12" hrz="269" vrt="010" />
<Tile v_lin="22" r_lin="07" l_lin="06" h_adj="01" r_adj="07" l_adj="06" tring="12" hrz="295" vrt="010" />
</Tiles>
</BOARD

The result right now is a stubbornly blank page.

jkmyoung
07-14-2009, 02:08 PM
The browser that you're using probably treats the output as HTML by default.
You'd still need to put the html and various elements in, if you're not doing so, (eg if you haven't trimmed the xslt code for posting).

Have you tried viewing the source of the output? What browser are you using?

https://developer.mozilla.org/en/SVG_In_HTML_Introduction or
http://www.w3schools.com/svg/svg_inhtml.asp

Mr Initial Man
07-14-2009, 02:30 PM
Actually, it was because of a small error in my selection (I had "THR:Tiles" instead of "THR:Tiles/THR:Tile").

But for some reason, FireFox won't recognize the "title" element contained in my XSL sheet.