Categories:
Cloud (204)
Entertainment (11)
Facebook (43)
General (50)
Life (31)
Programming (64)
Technology (398)
Testing (4)
Tools (488)
Twitter (5)
Wearable (26)
Web Design (44)
Collections:
Other Resources:
"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, 279🔥, 0💬
Popular Posts:
Why I am getting the "Opening ChromeSetup.exe" dialog box when trying to install Google Chrome 31 on...
How headers and footers are repeated in Microsoft Word? Why I see some headers and footers are repea...
How to install Mozilla Firefox 2.0 add-on: FireFTP? FireFTP is a Mozilla Firefox 2 add-on that provi...
What do those Fitbit icons mean? Over the years, Fitbit has used a number of icons on their wearable...
How to unzip a PowerPoint .pptx file? According to Microsoft documentation, a .pptx file is really a...