The acronym SVG stands for Scalable Vector Graphics and refers to graphics that are generated by a geometric specification rather than by pixels, like an image (called rasterized graphics as opposed to the vectorized graphics described here).
Transformations in SVG allow shapes to be transformed as a whole unit. This example transforms a set of four points that are given as a polygon. The transformation of each point is shown via the arrows.
<!DOCTYPE html> <html> <head> <title>XoaX.net's HTML</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> <!-- A small translation to move out of the corner for visibility --> <g transform="translate(10,10)"> <!-- The original square --> <polygon points="0,0 0,100 100,100 100,0" fill="none" stroke="#CCCCCC" stroke-width="2"/> <g fill="#CCCCCC" > <circle cx="0" cy="0" r="4"/> <circle cx="0" cy="100" r="4"/> <circle cx="100" cy="100" r="4"/> <circle cx="100" cy="0" r="4"/> </g> <g transform="scale(1.5)"> <!-- The scaled square --> <polygon points="0,0 0,100 100,100 100,0" fill="none" stroke="#00AA00" stroke-width="2"/> <g fill="#00AA00" > <circle cx="0" cy="0" r="4"/> <circle cx="0" cy="100" r="4"/> <circle cx="100" cy="100" r="4"/> <circle cx="100" cy="0" r="4"/> </g> </g> <!-- Arrows the indicate the translation of each vertex --> <!-- markerUnits="strokeWidth" scales the marker according to the stroke width --> <!-- markerUnits="strokeWidth" is the default behavior if nothing is specified --> <marker id="markerArrow" markerWidth="7" markerHeight="7" refX="6" refY="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L6,3 L0,0" style="fill: #FF0000;" /> </marker> <line x1="0" y1="100" x2="0" y2="150" style="stroke: #FF0000; stroke-width:2px; marker-end: url(#markerArrow); opacity: .5;" /> <line x1="100" y1="100" x2="150" y2="150" style="stroke: #FF0000; stroke-width:2px; marker-end: url(#markerArrow); opacity: .5;" /> <line x1="100" y1="0" x2="150" y2="0" style="stroke: #FF0000; stroke-width:2px; marker-end: url(#markerArrow); opacity: .5;" /> <text x="0" y="170" fill="#00AA00">transform="scale(1.5)"</text> </g> </svg> </body> </html>
© 20072024 XoaX.net LLC. All rights reserved.