Home/ Questions/Q 6774633
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T15:48:39+00:00

I need to transform an SVG file to HTML5 canvas, through XSLT. The problem

  • 0

I need to transform an SVG file to HTML5 canvas, through XSLT.
The problem is about Javascript.
In svg file I have a script tag with some code, like in this simple example:

<?xml version="1.0" encoding="UTF-8"?> 
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
id="slot" width="320" height="245">

   <script type="application/javascript"><![CDATA[
        var test = 2;
        alert("This is a test!");
   ]]></script>

   <----here svg drawing tags--->

</svg>

I want to output to html the Javascript code modified in some parts, and add some new code, like this:

<html>
   <head>
   <title> SVG to HTML5!</title>

   <script type="application/javascript">
      var new_test;                 <---the new code--->

      var test = 4;                 <---this is the modified code from 
      alert("This is a new test!");                 svg file--->
   </script>
   </head> 
   <body>
  </body>
</html>

How can I do that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    While it is possible to write (somewhat complicated) code that would perform individual line replacements/insertions/deletions, a much more easier approach is to replace the complete script element:

    <xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:svg="http://www.w3.org/2000/svg"
 xmlns="http://www.w3.org/2000/svg">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:param name="pNewScript">
     <script type="application/javascript">
      var new_test;                

      var test = 4;                
      alert("This is a new test!");                 
   </script>
 </xsl:param>

 <xsl:template match="node()|@*">
     <xsl:copy>
       <xsl:apply-templates select="node()|@*"/>
     </xsl:copy>
 </xsl:template>

 <xsl:template match="svg:script">
  <xsl:copy-of select="$pNewScript"/>
 </xsl:template>
</xsl:stylesheet>

    When this transformation is applied on the provided XML document (corrected to well-formed):

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
id="slot" width="320" height="245">

   <script type="application/javascript"><![CDATA[
        var test = 2;
        alert("This is a test!");
   ]]></script>

   <!-- here svg drawing tags -->

</svg>

    the wanted, correct result is produced:

     <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="slot" width="320" height="245">
   <script xmlns:svg="http://www.w3.org/2000/svg" type="application/javascript">
      var new_test;                

      var test = 4;                
      alert("This is a new test!");                 
   </script><!-- here svg drawing tags -->
</svg>
    • 0