HTML5 SVG Circle

by Huy Tuấn

HTML

<h2 align="center">HTML5 SVG Ellipse</h2>

<svg style="left:55%" id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" fill="green" />
</svg>

================================
<h2 align="center">HTML5 SVG Circle</h2>

<svg style=" left: 60%;" id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle id="redcircle" cx="50" cy="50" r="50" fill="green" />
</svg>
================================
<h2 align="center">HTML5 SVG Polygon</h2>

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="20,10 300,20, 170,50" fill="green" />
</svg>
================================
<h2 align="center">HTML5 SVG Polyline</h2>

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg" style="left:60%">
  <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="green" />
</svg>

=================================
<h2 align="center">HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg" style="left:55%">
  <defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" /> ===============================

  <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0" />
        <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
      </radialGradient>
    </defs>
    <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />

  </svg>

CSS

#svgelem {
   position: relative;
   left: 50%;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
 }