SVG: stroke-dasharray, clip-path, mask

Each cell states what it should look like.

1. stroke-dasharray, as a presentation attribute

Six dashed strokes. The last one is a pattern too fine to resolve and is deliberately drawn solid.

12/6 · 2/6 dotty · dash-dot · "12" = 12 on 12 off · odd list 9,5,3 doubles to 9,5,3,9,5,3 · last: SOLID

2. stroke-dashoffset

Same 10/10 pattern shifted by 0, 5, 10 and 15 units. The period is 20, so row 3 (offset 10) is a half period along and comes out in antiphase to row 1: it must START WITH A GAP. Rows 2 and 4 start with a half dash and a half gap.

row 1 starts with a dash, row 3 with a gap; rows 2 and 4 start half way through one

3. Where the dash pattern can come from

Presentation attribute, inline style, a <style> rule and an inherited value on a <g> must all give the same dashed square. The fifth is none and must be solid.

four identical dashed squares, then two solid ones (the last overrides the inherited pattern)

4. The dash pattern goes through the transform

The same "6 3" pattern at scale 1, 2 and 0.5. The dashes must scale with the drawing, so all three squares show the same NUMBER of dashes per side, not the same dash length.

same dash COUNT per side at three sizes

5. clip-path

A full-size square clipped by various shapes. The clip is geometry, so a circle clip gives a hard-edged circle, not a soft one.

solid orange disc
pentagon
two shapes in one clipPath: bar AND disc (their union)
circle clipped to a triangle: a wedge with two straight and one curved edge

6. clip-path on a group, and nesting

The clip on the <g> must reach both children. The left child carries a second clip of its own, and both apply -- only the intersection is painted.

left: the disc with its top and bottom sliced off · right: a plain 60-tall blue band

7. clip-path under a transform

The clip is read in the user space the element is in, so it moves and scales with the group. Both cells must look the same apart from position and size.

three discs: same shape, moved and enlarged — never a clip left behind at the origin

8. mask as a cut-out

A white region keeps, black shapes punch holes. This is the case the port implements exactly.

orange square with a round hole through it
a ring (annulus)
two separate holes — each is cut on its own
white-only mask: just the triangle shows

9. mask cases the port does NOT implement

Both of these are drawn WHOLE and unmasked, on purpose. In a desktop browser the first fades out to the right and the second is a half-transparent square; here both are flat and fully opaque. That is the intended degradation, not a bug — the failure to avoid is the content vanishing.

gradient mask → drawn whole (browser: fades to the right)
mid-grey mask → drawn whole (browser: 50% transparent)

10. Degenerate references

None of these may make the shape disappear or the diagram fail to parse. The middle square is the one exception to "identical": only url(#id) is resolved, so the CSS basic shape inset(10px) is ignored and the square is drawn full size. A desktop browser honours it and draws that one 30×30 inside its 50×50 box — the difference is expected.

missing id · none · a CSS basic shape we do not honour (full size here, SMALLER in a desktop browser) · a mask pointing at a clipPath · a clip that covers everything — all full size but the third, which differs by browser

11. All three together

A dashed stroke inside a clip, over a masked fill — the combination a real icon uses.

a pale disc with a clear round hole, two dashed rings and a dashed cross, everything cut off at the outer circle