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, 413🔥, 0💬
Popular Posts:
How to connect FileZilla to an Anonymous FTP Server? If you know the server host name, you can conne...
What is TestReail? TestRail is a comprehensive web-based test case management software to efficientl...
Where to find answers to frequently asked questions on Microsoft Word? I want to know how to open PD...
How to remove Microsoft Teams form my Windows 7 system? I don't want it any more. You can remove Mic...
How to create a new WeChat account with my Facebook account? Creating a new WeChat account with a Fa...