SVG Transformation
Scalable Vector Graphics (SVG) is a format for describing vector graphics using XML. SVG allows for easy manipulation of graphical elements using transformations.
Transformations in SVG are used to manipulate the position, size, and orientation of graphical elements. There are several types of transformations available in SVG, including:
- Translation - moves an element horizontally and/or vertically.
- Rotation - rotates an element around a specific point.
- Scaling - changes the size of an element.
- Skewing - tilts an element along the horizontal or vertical axis.
- Matrix transformation - allows for a combination of translations, rotations, scalings, and skewings.
These transformations can be applied individually or combined together to create more complex effects. Transformations can be applied to a specific element or to a group of elements.
Transformations are specified using the transform attribute in the SVG element. The value of the transform attribute is a list of transformations to apply, separated by whitespace. Each transformation is specified using a keyword and a value, with multiple values separated by commas.
For example, the following code rotates a rectangle by 45 degrees:
<svg>
<rect x="50" y="50" width="100" height="50" transform="rotate(45)"/>
</svg>Transformations can also be animated using SVG animation techniques such as SMIL or JavaScript. This allows for dynamic and interactive SVG graphics.
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