SVG Transformation

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

0215210344255637689981010
<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>

© 2019, regularcodes.com, All rights reserved