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("#gradColor")" stroke="none"></rect><rect x="60" y="120" width="20" height="50" fill="url("#gradColor")" stroke="none"></rect><rect x="90" y="70" width="20" height="100" fill="url("#gradColor")" stroke="none"></rect><rect x="120" y="130" width="20" height="40" fill="url("#gradColor")" stroke="none"></rect><rect x="150" y="150" width="20" height="20" fill="url("#gradColor")" stroke="none"></rect><rect x="180" y="120" width="20" height="50" fill="url("#gradColor")" stroke="none"></rect><rect x="210" y="140" width="20" height="30" fill="url("#gradColor")" stroke="none"></rect><rect x="240" y="110" width="20" height="60" fill="url("#gradColor")" stroke="none"></rect><rect x="270" y="80" width="20" height="90" fill="url("#gradColor")" stroke="none"></rect><rect x="300" y="90" width="20" height="80" fill="url("#gradColor")" stroke="none"></rect><rect x="330" y="70" width="20" height="100" fill="url("#gradColor")" 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>
Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.
New Comment