- From: Noam Rosenthal via GitHub <sysbot+gh@w3.org>
- Date: Sun, 01 Nov 2020 09:36:39 +0000
- To: public-css-archive@w3.org
Great. The current syntax I have in mind is approximately this:
`[[[[relative]? move to] | M | m] <<length-percentage>> <<length-percentage>>] |
[[[[relative]? line to] | L | l] <<length-percentage>> <<length-percentage>>] |
[[[[relative]? [horizontal|vertical] line to] | h | H | v | V] <<length-percentage>>]
[[[[relative]? curve to] | Q | q | c | C]<<length-percentage>> <<length-percentage>> <<length-percentage>> <<length-percentage>> [<<length-percentage>> <<length-percentage>>]] |
[[[[relative]? smooth curve to] | S | s | T | t] <<length-percentage>> [to|by] <<length-percentage>> [<<length-percentage>> <<length-percentage>>]] |
[[[[relative]? arc to] | a | A] <<length-percentage>> <<length-percentage>> <<length-percentage>> <<length-percentage>> <<length-percentage>> <<length-percentage>> <<length-percentage>>] |
[close | z | Z]
`
For the example of a scalable balloon-with-cursor clip, it would look like:
`path(m 0 calc(var(--radius) + var(--cursor-height)),
Q 0 var(--cursor-height) var(--radius) var(--cursor-height))
H calc(var(--cursor-offset) - var(--cursor-width) / 2),
L var(--cursor-offset) 0,
l calc(var(--offset-width) / 2, calc(0 - var(--cursor-height))),
L calc(100% - var(--radius)),
Q 100% 0 100% var(--radius),
V calc(100% - var(--radius)),
Q 100% 100% calc(100% - var(--radius)) 100%,
H var(--radius),
Q 0 100% 0 calc(100% - var(--radius)),
Z)`
or `
path(from 0 calc(var(--radius) + var(--cursor-height)),
curve to 0 var(--cursor-height) var(--radius) var(--cursor-height))
horizontal line to calc(var(--cursor-offset) - var(--cursor-width) / 2),
relative line to calc(var(--offset-width) / 2, calc(0 - var(--cursor-height))),
line to calc(var(--cursor-offset) + var(--cursor-width) / 2),
horizontal line to calc(100% - var(--radius)),
curve to 100% 0 100% var(--radius),
vertical line to calc(100% - var(--radius)),
curve to 100% 100% calc(100% - var(--radius)) 100%,
horizontal line to var(--radius),
curve to 0 100% 0 calc(100% - var(--radius)),
close)
`
or a combination of both.
Some doubts I'm contemplating:
- Whether both syntaxes are actually necessary, maybe the SVG-like one is sufficient, though the other one feels more like CSS (e.g. like the gradient syntaxes)
- Perhaps use `by` instead of `relative` for relative lines/curves/etc?
- Maybe use `lineto` etc instead of `line to`, as it conforms with the names in [SVG](https://www.w3.org/TR/SVG11/paths.html)
-
--
GitHub Notification of comment by noamr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5674#issuecomment-720060556 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Sunday, 1 November 2020 09:36:41 UTC