SVG Transformation

transformation of svg are used to modify the shape of svg elements.

rotate function

<svg id="chartInfo" height="600" width="425">
    <defs>
      <linearGradient id="gradColor" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(33, 150, 243);stop-opacity:1"></stop>
        <stop offset="100%" style="stop-color:rgba(0, 188, 212, 0.83);stop-opacity:1"></stop>
      </linearGradient>
    </defs>
  <g id="chart">
     <g id="chartInfoContainer"><rect x="30" y="150" width="20" height="20" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="60" y="120" width="20" height="50" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="90" y="70" width="20" height="100" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="120" y="130" width="20" height="40" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="150" y="150" width="20" height="20" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="180" y="120" width="20" height="50" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="210" y="140" width="20" height="30" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="240" y="110" width="20" height="60" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="270" y="80" width="20" height="90" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="300" y="90" width="20" height="80" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="330" y="70" width="20" height="100" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect></g>
 <g id="showTextStatus"><text x="35" y="190" stroke="none" id="textT0">0</text><text x="30" y="140" fill="green" stroke="none" id="textH0">2</text><text x="65" y="190" stroke="none" id="textT1">1</text><text x="60" y="110" fill="green" stroke="none" id="textH1">5</text><text x="95" y="190" stroke="none" id="textT2">2</text><text x="90" y="60" fill="green" stroke="none" id="textH2">10</text><text x="125" y="190" stroke="none" id="textT3">3</text><text x="120" y="120" fill="green" stroke="none" id="textH3">4</text><text x="155" y="190" stroke="none" id="textT4">4</text><text x="150" y="140" fill="green" stroke="none" id="textH4">2</text><text x="185" y="190" stroke="none" id="textT5">5</text><text x="180" y="110" fill="green" stroke="none" id="textH5">5</text><text x="215" y="190" stroke="none" id="textT6">6</text><text x="210" y="130" fill="green" stroke="none" id="textH6">3</text><text x="245" y="190" stroke="none" id="textT7">7</text><text x="240" y="100" fill="green" stroke="none" id="textH7">6</text><text x="275" y="190" stroke="none" id="textT8">8</text><text x="270" y="70" fill="green" stroke="none" id="textH8">9</text><text x="305" y="190" stroke="none" id="textT9">9</text><text x="300" y="80" fill="green" stroke="none" id="textH9">8</text><text x="335" y="190" stroke="none" id="textT10">10</text><text x="330" y="60" fill="green" stroke="none" id="textH10">10</text>
  </g>
  </g>
 <use transform="rotate(90 50 250)" xlink:href="#chart"/>
</svg>

scale function

<svg height="260" width="220"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <defs>
  <ellipse id="ellipseShap"  cx="50" cy="70" rx="15" ry="20"></ellipse>
  </defs>
  <text x=23 y=30 fill=red font-size=17>Original</text>
  <use  xlink:href="#ellipseShap" fill="red" stroke="red"   ></use>

  <text x=113 y=60 fill="#544d9a"  font-size=17>scale(1,2.5)</text>  
  <!-- Increasing height 1.5 Time and  width are same-->
  <use transform="scale(1,2.5)" xlink:href="#ellipseShap" fill="#544d9a" stroke="red"></use>
  <text x=10 y=250 fill="#544d9a"  font-size=17>scale(3,1.5)</text>  
  <!-- Increasing height 1.5 Time and  width are triples -->
  <use transform="scale(3,1.5)" xlink:href="#ellipseShap" fill="#544d9a" stroke="red"></use>
</svg>