Output

SVG version

<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/TR/REC-html40" >
     <circle cx="10" cy="10" r="3" fill="black"/>
     <text x="20" y="10" font-family="SansSerif"> Cylindrical coordinates will be: </text>
     <text x="20" y="25" font-family="SansSerif"> r = 14.142135623730951</text>
     <text x="20" y="40" font-family="SansSerif"> angle = 0.7853981633974483</text>
</svg>

Source
<points>
     <point x="10" y="10"/>
</points>

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

     <xsl:template match="/">
          <svg width="200" height="50" xmlns="http://www.w3.org/2000/svg" >
               <xsl:for-each select="//point">
                    <circle cx="{@x}" cy="{@y}" r="3" fill="black"/>
                    <text x="{@x + 10}" y="{@y}" font-family="SansSerif"> Cylindrical coordinates will be: </text>
                    <text x="{@x + 10}" y="{@y + 15}" font-family="SansSerif"> r =
                         <xsl:value-of select="math:sqrt(@x*@x + @y*@y)" xmlns:math="java.lang.Math" />
                    </text>
                    <text x="{@x + 10}" y="{@y + 30}" font-family="SansSerif"> angle =
                         <xsl:value-of select="math:atan(@y div @x)" xmlns:math="java.lang.Math" />
                    </text>
               </xsl:for-each>
          </svg>
     </xsl:template>
</xsl:stylesheet>