Last modified on 4 March 2011, at 12:34

XForms/SVG

MotivationEdit

You want to dynamically load and render SVG.

Sample ProgramEdit

<html xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:ev="http://www.w3.org/2001/xml-events"	
   xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:svg="http://www.w3.org/2000/svg">
   <head>
      <title>SVG Browser</title>
         <style type="text/css">
	   #svgimg .xforms-value {width: 400px; min-width: 400px; height: 400px; min-height: 400px;}
	</style>
	<xf:model>
           <xf:instance id="current">
				<current xmlns=""/>
           </xf:instance>
           <xf:instance id="names">
              <names xmlns="">
                <name fname="mozilla.svg">Mozilla</name>
                <name fname="wii.svg">Wii</name>
                <name fname="duke.svg">Duke</name>
                <name fname="git.svg">Git</name>
                <name fname="cartman.svg">Cartman</name>
                <name fname="tiger.svg">Tiger</name>
                <name fname="gcheck.svg">GCheck</name>
                <name fname="pencil.svg">Pencil</name>
                <name fname="python.svg">Python</name>
                <name fname="ietf.svg">IETF</name>
                <name fname="osgr_pie.svg">OSGR Pie</name>
              </names>
           </xf:instance>
           <xf:instance id="inlinesvg">       
                <svg xmlns='http://www.w3.org/2000/svg'/>
           </xf:instance>
           <xf:submission id="loadsvg" method="get" 
                  replace="instance" instance="inlinesvg" 
                  serialization="none" mode="synchronous">
                <xf:resource value="concat('svg/',.)"/>
           </xf:submission>
 
           <xf:action ev:event="xforms-ready">
                <xf:setvalue ref="." value="instance('names')/name[1]/@fname"/>
                <xf:send submission="loadsvg"/>
           </xf:action>
       </xf:model>
   </head>
   <body>
     <h1>SVG Browser</h1>
		<xf:select1 ref="." appearance="minimal" incremental="true">
			<xf:label>Select SVG: </xf:label>
			<xf:itemset nodeset="instance('names')/name">
				<xf:label ref="."/>
				<xf:value ref="@fname"/>
			</xf:itemset>
			<xf:send ev:event="xforms-value-changed" submission="loadsvg"/>
		</xf:select1>
 
		<xf:trigger>
			<xf:label>Next</xf:label>
			<xf:setvalue ev:event="DOMActivate" ref="." value="if(instance('names')/name[preceding-sibling::name[1]/@fname = current()],instance('names')/name[preceding-sibling::name[1]/@fname = current()]/@fname,instance('names')/name[1]/@fname)"/>
		</xf:trigger>
 
		<br/>
      <xf:output id="svgimg" value="xf:serialize(instance('inlinesvg'))" mediatype="image/svg+xml"/>
   </body>
</html>

CreditsEdit

This was created by Alain Couthures on the XSLTForms mailing list.