SVG Transformation

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

rotate function

SVG transformation Example 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>

scale function

SVG scale functin Example Original scale(1,2.5) scale(3,1.5)
<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







© 2021, kalkicode.com, All rights reserved