SVG -> XSLT -> SVG

Dev Shed Forums Sponsor:

September 2nd, 2004, 01:50 PM

jarra

Contributing User

Join Date: Feb 2004

Location: the Netherlands

Posts: 66

Time spent in forums: 52 m 39 sec
Reputation Power: 5

SVG -> XSLT -> SVG

Hi,

I'm trying to play around with 2 examples from the web, whereby i use xslt to transform svg to svg.
but somehow, doesn't seem to work in IE6 on windows.
Am I doing something wrong?

input
http://www.jarra.nl/_TEST/in01.svg

XSLT
http://www.jarra.nl/_TEST/triangularA01.xsl

thanks,
jarra

__________________
http://www.jarra.nl

September 6th, 2004, 03:45 PM

jarra

Contributing User

Join Date: Feb 2004

Location: the Netherlands

Posts: 66

Time spent in forums: 52 m 39 sec
Reputation Power: 5

[bump]
no-one..?

September 7th, 2004, 02:14 PM

Teflon

Teflon The Black

Join Date: Feb 2004

Location: Woodbridge VA

Posts: 246

Time spent in forums: 4 h 28 m 14 sec
Reputation Power: 5

tryin to figure out what is supposed to happen here, so ya can ya tell me

im the winner!

svg file:

PHP Code:


		
			
<?xml version="1.0" encoding="ISO-8859-1" ?>

<?xml-stylesheet type="text/xsl" href="triangularA01.xsl"?>

<svg viewBox="0 0 300 300">

    <style type="text/css">

        text {font-size:13; font-family:monospace}

    </style>

    <g transform="scale(10) translate(2 2)">

        <path fill="#f9c" d="M0 0,2 0,1 1.732 z" transform="scale(10) translate(1 1)"/>

    </g>

    <text>

        <tspan x="10" y="90">level of depth:</tspan>

        <!-- set the level of depth (don't overdo it ;) 8 is pretty high)-->

        <tspan x="10" y="100" id="level_of_depth">3</tspan>

        <tspan x="10" y="120">view all levels:</tspan>

        <!-- to see all levels of depth, set to 'true'to see a only one level of depth, set to 'false' -->

        <tspan x="10" y="130" id="view_all">true</tspan>

        <tspan x="10" y="150">background-color:</tspan>

        <!-- set the background-color -->

        <tspan x="10" y="160" id="background_color">#000</tspan>

    </text>

</svg>

xslfile:

PHP Code:


		
			
<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xlink="http://www.w3.org/1999/xlink">



  <xsl:param name="depth" select="//tspan[@id='level_of_depth']"/>

  <xsl:param name="view_all" select="//tspan[@id='view_all']"/>

  <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>

  <xsl:strip-space elements="*"/>

  <xsl:template match="/" name="main">



    <svg viewBox="{svg/@viewBox}">

      <defs>

        <g id="level_0" transform="scale(0.1)">

          <xsl:copy-of select="//g/descendant::*"/>

        </g>

        <xsl:apply-templates/>

      </defs>

      <rect style="fill:{//tspan[@id='background_color']}" x="-100%" y="-100%" width="100%" height="100%"/>

      <xsl:call-template name="use"/>

    </svg>

  </xsl:template>



  <xsl:template match="g" name="go">

    <xsl:param name="current" select="0"/>

    <g id="level_{$current+1}">

      <use xlink:href="#level_{$current}" transform="matrix(0.5 0 0 0.5   0  0)"/>

      <use xlink:href="#level_{$current}" transform="matrix(0.5 0 0 0.5   1  0)"/>

      <use xlink:href="#level_{$current}" transform="matrix(0.5 0 0 0.5  0.5 0.866)"/>

    </g>

    <!--<xsl:apply-templates/>-->

    <xsl:if test="$current<($depth)-1">

      <xsl:call-template name="go">

        <xsl:with-param name="current" select="$current+1"/>

      </xsl:call-template>

    </xsl:if>

  </xsl:template>



  <xsl:template name="use">

    <xsl:param name="current" select="0"/>

    <xsl:choose>

      <xsl:when test="$view_all = 'true'">

        <use opacity="{(1 div ($depth+1)) * ($current + 1)}" xlink:href="#level_{$current}" transform="translate(30,30) scale(120)"/>

        <xsl:if test="$current<($depth)">

          <xsl:call-template name="use">

            <xsl:with-param name="current" select="$current+1"/>

          </xsl:call-template>

        </xsl:if>

      </xsl:when>

      <xsl:otherwise>

        <use xlink:href="#level_{$depth}" transform="translate(30,30) scale(120)"/>

      </xsl:otherwise>

    </xsl:choose>

  </xsl:template>



  <xsl:template match="//text"/>

  <xsl:template match="//style"/>

</xsl:stylesheet>

output

PHP Code:


		
			
<?xml version="1.0" encoding="UTF-8"?>

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">

  <defs>

    <g id="level_0" transform="scale(0.1)">

      <path fill="#f9c" d="M0 0,2 0,1 1.732 z" transform="scale(10) translate(1 1)"/>

    </g>

    <g id="level_1">

      <use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5   0  0)"/>

      <use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5   1  0)"/>

      <use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5  0.5 0.866)"/>

    </g>

    <g id="level_2">

      <use xlink:href="#level_1" transform="matrix(0.5 0 0 0.5   0  0)"/>

      <use xlink:href="#level_1" transform="matrix(0.5 0 0 0.5   1  0)"/>

      <use xlink:href="#level_1" transform="matrix(0.5 0 0 0.5  0.5 0.866)"/>

    </g>

    <g id="level_3">

      <use xlink:href="#level_2" transform="matrix(0.5 0 0 0.5   0  0)"/>

      <use xlink:href="#level_2" transform="matrix(0.5 0 0 0.5   1  0)"/>

      <use xlink:href="#level_2" transform="matrix(0.5 0 0 0.5  0.5 0.866)"/>

    </g>

  </defs>

  <rect style="fill:#000" x="-100%" y="-100%" width="100%" height="100%"/>

  <use opacity="0.25" xlink:href="#level_0" transform="translate(30,30) scale(120)"/>

  <use opacity="0.5" xlink:href="#level_1" transform="translate(30,30) scale(120)"/>

  <use opacity="0.75" xlink:href="#level_2" transform="translate(30,30) scale(120)"/>

  <use opacity="1" xlink:href="#level_3" transform="translate(30,30) scale(120)"/>

</svg>

__________________
Teflon - The Black <desc>Mark This Up</desc>

Last edited by Teflon : September 7th, 2004 at 03:00 PM.

September 7th, 2004, 02:53 PM

jarra

Contributing User

Join Date: Feb 2004

Location: the Netherlands

Posts: 66

Time spent in forums: 52 m 39 sec
Reputation Power: 5

I grabbed these examples from the web:
http://www.pinkjuice.com/svg/xslt/fractals/

trying to play around with it, to teach me a bit of svg + xslt.
But it's not working at all ;-(

thanx,
jarra

September 7th, 2004, 03:00 PM

Teflon

Teflon The Black

Join Date: Feb 2004

Location: Woodbridge VA

Posts: 246

Time spent in forums: 4 h 28 m 14 sec
Reputation Power: 5

look up

edit:
crud I just realized I did that with php to perform the actual transformation....Im losin my mind, Ill look at it some more...

Last edited by Teflon : September 7th, 2004 at 03:03 PM.

September 16th, 2004, 02:46 PM

Teflon

Teflon The Black

Join Date: Feb 2004

Location: Woodbridge VA

Posts: 246

Time spent in forums: 4 h 28 m 14 sec
Reputation Power: 5

I got your pm and decided to respond here, so that others that might have questions can see them.

I cannot figure out why its not functioning properly with IE or Firefox using Adobe SVG viewer. Now I have got it to function with the php libxslt/libxml parser. This has me a little baffled. Either the php parser is to lax or the code is bad ???

-Teflon

September 16th, 2004, 06:03 PM

jarra

Contributing User

Join Date: Feb 2004

Location: the Netherlands

Posts: 66

Time spent in forums: 52 m 39 sec
Reputation Power: 5

thanx,
;-)

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: