Re: [csswg-drafts] [css-shapes] CSS flexibility for `path()`s (and let’s fix paths while we’re at it?) (#9889)

One thing to note is that, since SVG commands all rquire an explicit endpoint, you can always "skip" a command by just changing to a `move` command with the same endpoint, achieving the equivalent of a "pen up" command. This isn't possible if we introduce commands without explicit endpoints, like `circle`/`ellipse`/`corner`; you'd have to do the trig yourself to find the endpoint. We should fix this, by allowing any command to be prefixed with `move` to make it just move to the endpoint of the given command without drawing. Like, `move circle ...` to move the pen to *whereever* that circle happens to stop at.

This also fixes the existing problem in HTML where, if you *do* want to draw a rounded rect using just four `arcTo()` commands (or any other polygon with rounded corners), you have to first identify a spot you *know* is on the straight segment preceding the curve and move to it, which again might require trig, and then end with an additional line to that point to finish the straight side. With this `move` prefix, you could easily do it without any math - just start with the *last* corner being a move, and then go thru the whole shape.

Like:

```
/* 100x100 square, with 5px corner rounding */
shape(
 move corner to 0px 0px of 5px, 
 corner to 100px 0px of 5px, 
 corner to 100px 100px of 5px, 
 corner to 0px 100px of 5px, 
 corner to 0px 0px of 5px)
```

That initial `move corner` would start you at the end of the 0,0 curve, so your first real `corner` command draws the entire straight side, then the remaining commands finish the rect. The same would apply to any other polygon/star/etc: just repeat the final `corner` command as an initial `move corner` command.

While only `circle`/`ellipse`/`corner` *need* `move`-prefix support, for simplicity it would be good to support it for all the commands. For everything else it just ignores everything about the command except the ending point.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9889#issuecomment-1933223451 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 8 February 2024 01:29:43 UTC