Svg To Html5 (Canvas Element) Through Xslt

[cyanoboy]

Hi all!I'm trying to learn XSLT beacuse I need to trasform an SVG file to Canvas element of HTML5.The problem is that I know very little about XSLT, and so I hope here I can find a savior!Starting from beginning..If I have a test.svg file like this:<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="test_transform.xsl"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="12" y="25" /> <circle x="55" y="10" /></svg>The test_transform.xsl file, how it should be? Which references must contain the header (xsl:stylesheet and xsl:output) ?I hope someone can help me!

[Martin Honnen]

XSLT can transform XML to HTML or XML or plain text. A HTML5 canvas does not take any such format as its "input", rather it exposes an API to draw to it. Thus I don't understand why you think that XSLT can be helpful to use SVG with a canvas. What do you expect the XSLT to do, do you want to "transform" the SVG elements into calls to the canvas' drawing context API?Most browsers these days (Firefox, Opera, Safari, Chrome, IE 9) that support canvas supports directly rendering SVG as well so that is another reason why I don't understand what you want to achieve with XSLT.

[cyanoboy]

Yes I know it's a strange thing, but I must do it for a university exam ^_^What I have to do is to translate svg code in calls to the canvas drawing context API..For example convert the rect svg function to context.rect canvas HTML5 function, and so on..But I don't know how to set up the base of the XSLT file.

[Martin Honnen]

If you want the XSLT to output plain text (Javascript) code then use

<xsl:output method="text"/>

. The xsl: stylesheet element does not need anything particular, of course if you want to select SVG elements you need to declare the namespace so

<xsl:stylesheet  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"  version="1.0"  xmlns:svg="http://www.w3.org/2000/svg">  <xsl:output method="text"/>   <xsl:template match="svg:circle">    <!-- new generate script code here for drawing circle in canvas -->  </xsl:template>   <xsl:template match="svg:rect">...</xsl:template> </xsl:stylesheet> 

should allow you to get started.

[cyanoboy]

Thanks! By the way I must output to html(5)..how it should be?

[cyanoboy]

Ok, I'm using <xsl:output method="html" encoding="UTF-8"/> declaration and seems go well..Now I've two problems:1) How can I copy <script> tag with it's content (it's javascript code with <![CDATA[ .. ]]>)?I tryed with <xsl:copy-of select="svg:svg/svg:script" />, but it don't copy the CDATA tags! 2) How can I take only a part of a tag's attribute?I have <svg viewBox="10 10 20 20"> and I want to take only the last two numbers (20, 20) to do <canvas width="20" height="20">

[Martin Honnen]

Well first of all XSLT works on the XSLT/XPath data model which does not distinguish between plain text nodes and CDATA section nodes so copying CDATA sections is not possible. Furthermore you say you want to output HTML5 and HTML5 does not allow the use of CDATA sections in any content but SVG or MathML: http://www.w3.org/TR/html5/syntax.html#cdata-sections. So I don't understand why you want CDATA sections if you really want to output HTML5. As for taking part of a space delimited list like that attribute value, if you use XSLT 2.0 you can easily use tokenize(@viewBox, ' ') e.g.

<xsl:variable name="tokens" select="tokenize(@viewBox, ' ')"/><canvas width="{$tokens[3]}" height="{tokens[4]"></canvas>

With XSLT 1.0 it is more complicated, you would need to use substring-after/substring before combinations. See the list of string functions in XSLT/XPath 1.0: http://www.w3.org/TR/xpath/#section-String-Functions

[cyanoboy]

Ok, I come back here after a while..In the script tag of the svg file I've the javascript code logic (the svg file it's a slot machine game) surrounded by CDATA tag.I need to copy the inside of the CDATA tag (obviously the javascript code) to html5 script tag (without CDATA tag).I also need to modify the javascript code to fit in calls to canvas context API..Practically the xslt must copy the javascript code and, when it found some particular expressions, it must change them in other expressions that I specific..Is it possibile to do? Maybe using XSLT 2.0?

[Martin Honnen]

Well XSLT is a programming language to process and transform XML, not Javascript code. XSLT 2.0 has some text parsing and manipulation facilities with the replace function and with the xsl: analyze-string instruction but for parsing Javascript code I would suggest to consider an existing ECMAScript parser implementation and not to try to write one in XSLT 2.0.

[cyanoboy]

for parsing Javascript code I would suggest to consider an existing ECMAScript parser implementation and not to try to write one in XSLT 2.0.

I know that, but I must do this work for a university exam..I'm trying little by little to create the xslt...Now I've this problem...I need to do a for-each cycle, selecting node with attributes that begin with a certain letter..I tried to do <xsl:for-each select="svg:svg/svg:image[@id='a'*]">, but is incorrect..i tried also <xsl:for-each select="svg:svg/svg:image[@id=a*]">, but nothing..What's the right expression?

[cyanoboy]

I found it...using the starts-with function! <xsl:for-each select="svg:svg/svg:image[starts-with(@id, 'a')]"> Now...next problem! There is a way to create a variable and set it's name dinamically?For example: <xsl:for-each select="@*[starts-with(name(.),'x')]"> <xsl:variable name="name(.)" select="0" /></xsl:for-each> I tried but it's not a good syntax!