"transform" Attribute for Transformations
What is the "transform" attribute and associated transformation functions?
✍: FYIcenter.com
When drawing a graphical object, you can specify a sequence of
transformation functions through the "transform" attribute.
Here is the syntax of specifying the "transform" attribute on a graphical object element:
<{object} transform="function_1() function_2() ... function_n()" ...>
...
</{object}>
When the above object is being rendered to the canvas, the object coordinate system will be transformed by applying all transformation functions in the backward order starting from function_n() first.
Here is an HTML document, transformations.html, that has a SVG image with transformation functions specified in the "transform" attribute:
<html><body>
<svg xmlns="http://www.w3.org/2000/svg"
style="background-color: #dddddd"
width="200" height="200" viewBox="-50 -50 100 100">
<line x1="-50" y1="0" x2="50" y2="0" stroke="black" stroke-dasharray="4"/>
<line x1="0" y1="-50" x2="0" y2="50" stroke="black" stroke-dasharray="4"/>
<rect cx="0" cy="0" width="30" height="20" fill="yellow"
transform="scale(2,1) translate(0,-15) rotate(45,0,0)" />
</svg>
</body></html>
When you open the above HTML file, transformations.html, in a Web browser, you see a rectangle object gets rotated, translated, and scaled:
⇒ Transform Group of Objects Using "g"
⇐ Transformation of Object Coordinates
2023-08-03, ∼1263🔥, 0💬
Related Topics:
