SVG: Quarter Circle Pies

Almost all modern web browsers are nowadays able to render SVG code. Here is example of the pies. From SVG to PNG format converted by http://www.fileformat.info/convert/image/svg2raster.htm  Bellow is code highlighted by tohtml.com and resulting picture.

<svg width="480" height="180" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Pies examples by Josef 2011-Feb-23-->
<defs>
 <g id="quarter_pies">
  <path d="M0,0 L0,-200  A200,200 0 0,1  200,000  z" 
    style="fill:#ff0000;fill-opacity: 1;stroke:black;stroke-width: 1"/>
  <path d="M0,0 L-200,0  A200,200 0 0,1    0,-200 z" 
    style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>
  <path d="M0,0 L0,200   A200,200 0 0,1 -200,0    z" 
    style="fill:blue;fill-opacity: 1;stroke:black;stroke-width: 1"/>
  <path d="M0,0 L200,0   A200,200 0 0,1    0,200  z" 
    style="fill:pink;fill-opacity: 1;stroke:black;stroke-width: 1"/>
 </g>
 <g id="one_quarter_pie">
  <path d="M0,0 L0,-200  A200,200 0 0,1    200,0  z" 
    style="fill:#ff0000;fill-opacity: 1;stroke:black;stroke-width: 1"/>
  <path d="M0,0 L200,0   A200,200 0 1,1    0,-200 z" 
    style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>
 </g>
 <g id="exploded_quarter_pie">
  <path d="M30,-30 L30,-230  A200,200 0 0,1  230,-30  z" 
    style="fill:#ff0000;fill-opacity: 1;stroke:black;stroke-width: 1"/>
  <path d="M0,0 L200,0   A200,200 0 1,1    0,-200 z" 
    style="fill:green;fill-opacity: 1;stroke:black;stroke-width: 1"/>
 </g>
</defs>

 <rect x="0" y="0" width="100%" height="100%" fill="#fde"></rect>
 <text x="110"  y="28"
   style="font-family: Arial;font-size: 26;stroke:red; fill:red;">Quater Circle Pies</text>
 <use transform="translate(60,100) scale(0.25,0.25)" xlink:href="#quarter_pies"></use>
 <use transform="translate(180,100)  scale(0.25,0.25)" xlink:href="#one_quarter_pie"></use>
 <use transform="translate(300,100)  scale(0.25,0.25)" xlink:href="#exploded_quarter_pie"></use>
 <use transform="translate(420,100)  scale(0.25,0.25) rotate(-45)" xlink:href="#exploded_quarter_pie"></use>
</svg>

quartercirclepies.png

Update: There is now tool to create pie chart.

This entry was posted in workday. Bookmark the permalink.

2 Responses to SVG: Quarter Circle Pies

  1. admin says:

    Link example for circle at center 250,100 with diameter 50:
    <a xlink:href=”http://circle.example.com” ><path
    d=”M 250, 100
    m -25, 0
    a 25,25 0 1,0 50,0
    a 25,25 0 1,0 -50,0″ style=”fill:white;fill-opacity: 1;stroke:red;stroke-width: 3″/>
    </a>

Leave a Reply