HTML中<path>标签的特殊路径格式技术咨询

Hey there! Let's break down the SVG <path> element's d attribute—this is exactly what that code snippet you found is using to define a custom shape. It's one of the most powerful tools in SVG for drawing complex paths, so let's unpack its key parts:

Core Basics #

The d attribute is a string of commands and coordinates that tell the SVG renderer how to "draw" the path. Each command is either uppercase (uses absolute coordinates relative to the SVG's origin) or lowercase (uses coordinates relative to the current pen position).

Key Commands & Syntax #

Here are the most common commands you'll encounter, including ones from your snippet:

1. Move To (M/m) #

• Purpose: Sets the starting point of the path (or jumps to a new position without drawing)
• Syntax:
  • Absolute: M x y (moves pen to absolute coordinate (x,y))
  • Relative: m dx dy (moves pen dx units right/left, dy units up/down from current position)
• Example from your code: M5.47 7.2 moves the pen to the absolute point (5.47, 7.2), then l-.55.33 (relative Line To) draws a line from that point to (5.47 - 0.55, 7.2 + 0.33).

2. Line To (L/l, H/h, V/v) #

• Purpose: Draws a straight line from the current pen position
• Variations:
  • L x y / l dx dy: Draws a line to an absolute/relative point
  • H x / h dx: Draws a horizontal line (only x coordinate needed)
  • V y / v dy: Draws a vertical line (only y coordinate needed)
• Note: You can chain multiple coordinates for the same command (e.g., L 10 20 30 40 draws two lines: from current point to (10,20), then to (30,40)).

3. Elliptical Arc (A/a) #

• Purpose: Draws a curved arc segment (this is what a5.14 5.14 0 0 1-3.2-1.28 in your code uses)
• Syntax:
  • Absolute: A rx ry x-axis-rotation large-arc-flag sweep-flag x y
  • Relative: a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
• Parameter breakdown:
  • rx/ry: Radius of the ellipse along the x/y axis
  • x-axis-rotation: Angle (in degrees) the ellipse is rotated relative to the SVG coordinate system
  • large-arc-flag: 0 = draw the smaller arc between two points; 1 = draw the larger arc
  • sweep-flag: 0 = draw the arc counterclockwise; 1 = draw it clockwise
  • x/y (or dx/dy): End point of the arc (absolute or relative)
• Example from your code: a5.14 5.14 0 0 1-3.2-1.28 draws a relative arc with:
  • x/y radius = 5.14
  • No rotation (0)
  • Small arc (0)
  • Clockwise direction (1)
  • End point 3.2 units left and 1.28 units down from the current pen position

4. Bezier Curves (C/c, S/s, Q/q, T/t) #

• Purpose: Draws smooth curved paths using control points
  • Cubic Bezier (C/c): Uses two control points + an end point: C x1 y1 x2 y2 x y (absolute)
  • Smooth Cubic Bezier (S/s): Reuses the previous curve's second control point as its first, for seamless curves: S x2 y2 x y
  • Quadratic Bezier (Q/q): Uses one control point + an end point: Q x1 y1 x y
  • Smooth Quadratic Bezier (T/t): Reuses the previous control point's mirror, for smooth curves: T x y

5. Close Path (Z/z) #

• Purpose: Closes the path by drawing a straight line from the current pen position back to the path's starting point
• Syntax: Just Z or z (no coordinates needed—both work the same)

Syntax Shortcuts #

You'll often see shorthand in real-world path code:

• Omit repeated command letters: Instead of L 10 20 L 30 40, write L 10 20 30 40
• No space before negative coordinates: l-.55.33 is the same as l -0.55 0.33
• Combine commands in a single string: The entire d attribute is a single sequence of commands and coordinates, no separators needed beyond spaces/negative signs

Quick Note on SVG Coordinates #

Remember: In SVG, the coordinate system has the origin at the top-left corner. So increasing x moves right, increasing y moves down (opposite of standard math graphs!).

内容的提问来源于stack exchange，提问作者Munerz