Transform Group of Objects Using "g"
Q
How to transform a group of objects using the "g" element?
✍: FYIcenter.com
A
The "g" element is a container that allows you to group
multiple graphical objects together as a single object.
This allows you to transform the group as a whole,
instead individual objects.
Here is an HTML document, transformation-group.html, that has a SVG image with transformation on a group of graphical objects:
<html><body>
<svg xmlns="http://www.w3.org/2000/svg"
style="background-color: #dddddd"
width="350" height="200" viewBox="-50 -50 350 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"/>
<g transform="rotate(-10)">
<text x="0" y="0" font-family="Arial" font-size="36" fill="grey"
transform="skewX(-75) scale(1,0.2)">FYIcenter.com</text>
<text x="0" y="0" font-family="Arial" font-size="36">FYIcenter.com</text>
</g>
</svg>
</body></html>
When you open the above HTML file, transformation-group.html, in a Web browser, you see 2 text strings rotated by -10 degree:
⇒ List of Transformation Functions
⇐ "transform" Attribute for Transformations
2023-08-03, 252🔥, 0💬
Related Topics:
