How to understand SVG's coordinate system and transformations - 面试题

SVG's coordinate system and transformations are key concepts for understanding SVG graphic positioning and manipulation:

1. Coordinate System SVG uses a Cartesian coordinate system with the origin (0,0) at the top-left corner:

x-axis positive direction is right
y-axis positive direction is down
Units can be px, em, rem, cm, mm, etc.

2. viewBox Attribute viewBox is one of the most important attributes in SVG, defining the SVG content's coordinate system and visible area.

svg
<svg viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

viewBox Parameters:

min-x, min-y: Top-left corner coordinates
width, height: Width and height of the visible area

viewBox Functions:

Defines internal coordinate system
Implements responsive scaling
Controls display ratio

3. preserveAspectRatio Attribute Controls how viewBox scales and aligns within the SVG viewport.

svg
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Parameter Description:

align: Alignment method (xMin, xMid, xMax + YMin, YMid, YMax)
meetOrSlice: Scaling method (meet: display completely, slice: fill entire area)

Common Values:

xMidYMid meet: Centered display, maintain aspect ratio (default)
xMidYMid slice: Centered display, fill entire area
none: No aspect ratio, stretch to fill

4. transform Attribute SVG elements can be transformed via the transform attribute.

Transformation Types:

Translation (translate)

svg
<rect x="0" y="0" width="50" height="50" fill="red" transform="translate(100, 100)" />

Rotation (rotate)

svg
<rect x="0" y="0" width="50" height="50" fill="blue" transform="rotate(45, 25, 25)" />

Parameters: angle, rotation center x, rotation center y

Scaling (scale)

svg
<rect x="0" y="0" width="50" height="50" fill="green" transform="scale(2)" />
<rect x="0" y="0" width="50" height="50" fill="yellow" transform="scale(1.5, 0.5)" />

Skewing (skew)

svg
<rect x="0" y="0" width="50" height="50" fill="purple" transform="skewX(30)" />
<rect x="0" y="0" width="50" height="50" fill="orange" transform="skewY(20)" />

Combined Transformations

svg
<rect x="0" y="0" width="50" height="50" fill="red" 
      transform="translate(100, 100) rotate(45) scale(1.5)" />

5. Coordinate System Nesting Use <g> elements to create local coordinate systems.

svg
<svg viewBox="0 0 200 200">
  <g transform="translate(50, 50)">
    <circle cx="0" cy="0" r="20" fill="red" />
    <circle cx="50" cy="0" r="20" fill="blue" />
    <circle cx="25" cy="50" r="20" fill="green" />
  </g>
</svg>

6. Practical Application Examples

Responsive Icon:

svg
<svg viewBox="0 0 24 24" width="100%" height="100%">
  <path d="M12 2L2 22h20L12 2zm0 4l7 14H5l7-14z" fill="currentColor" />
</svg>

Center Alignment:

svg
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" width="300" height="200">
  <rect x="0" y="0" width="100" height="100" fill="blue" />
</svg>

Best Practices:

Always use viewBox for responsive design
Use preserveAspectRatio to control scaling behavior
Reasonably use <g> grouping and transformations to simplify code
Note that transformation order affects the final result