Click here to Skip to main content
12,406,986 members (64,204 online)
Click here to Skip to main content

Stats

44.9K views
2.9K downloads
68 bookmarked
Posted

Making SVG Charts with Common Objects

, 22 Jun 2010 CPOL
This article explains how to create some interesting charts in SVG documents
��<?xml version="1.0" encoding="utf-16"?>

<xsl:stylesheet version="1.0" 

                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

                xmlns:msxsl="urn:schemas-microsoft-com:xslt" 

                xmlns="http://www.w3.org/2000/svg"

                exclude-result-prefixes="msxsl"

>

    <xsl:output method="html" 

                indent="no" 

                encoding="utf-16" 

                version="1.0" 

                doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" 

                doctype-public="-//W3C//DTD SVG 1.1//EN" 

                omit-xml-declaration="no"

                media-type="image/svg+xml"

                xmlns="http://www.w3.org/2000/svg"

                />





    <xsl:template match="svg">



    <svg>



      <xsl:attribute name="width">

        <xsl:value-of select="svgDetails/width/."/>

      </xsl:attribute>

      <xsl:attribute name="height">

        <xsl:value-of select="svgDetails/height/."/>

      </xsl:attribute>



      <xsl:for-each select="//svgObjects/*">

        <xsl:choose>

          <xsl:when test="name()='rect'">

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

          </xsl:when>

          <xsl:when test="name()='text'">

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

          </xsl:when>

          <xsl:when test="name()='polygon'">

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

          </xsl:when>

          <xsl:when test="name()='line'">

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

          </xsl:when>

        </xsl:choose>

      </xsl:for-each>

      

    </svg>

    

  </xsl:template>



  <xsl:template name="rectangle">

    <rect fill="{@color}" x="{@x}" y="{@y}" width="{@width}" height="{@height}" stroke="Black" stroke-width="0.5" />

  </xsl:template>



  <xsl:template name="text">

    <text x="{@x}" y="{@y}" font-size="{@font-size}" rotate="{@rotate}">

      <xsl:value-of select="."/>

    </text>

  </xsl:template>



  <xsl:template name="polygon">

    <polygon fill="{@color}" points="{@points}" />

  </xsl:template>



  <xsl:template name="line">

    <line fill="White" stroke="{@color}" stroke-width="{@width}" x1="{@x1}" y1="{@y1}" x2="{@x2}" y2="{@y2}">

      <xsl:if test="@dashed='true'">

        <xsl:attribute name="stroke-dasharray">4</xsl:attribute>

      </xsl:if>

    </line>

  </xsl:template>

  

  

</xsl:stylesheet>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gerard Castelló Viader
Software Developer
Spain Spain
http://www.linkedin.com/pub/gerard-castell%C3%B3-viader/67/748/a80

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160730.1 | Last Updated 22 Jun 2010
Article Copyright 2009 by Gerard Castelló Viader
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid