Post

Una Kravets
@una.im

OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside! So you can really *shape* your UI's 😉* rect() and xywh() are also supported for shape-outside in Chrome 149 codepen.io/una/full/ogz... *(just let me have my Mom joke)

Rob
@thatrobhuman.com

let us use shape() in an SVG path d, and let us use achor-position within shape, then I'll get excited :P

Una Kravets
@una.im

You could use anchor within an SVG if you give it the right naming! Why would you need shape() inside of SVG? Don’t you already have the ability to draw shapes?

Rob
@thatrobhuman.com

do you mean having the anchor target be an svg element? If so, that's not quite what I mean. I mean doing something like this (this is a bit simplified, of course) svg > path.connector { d: shape(from anchor(--socket-A center) line to anchor(--socket-B center)); }

Rob
@thatrobhuman.com

The way I had to do this was to have a wrapper div with a resize observer that has its corners anchored to socket-A and socket-B. Inside that are two reference points, and an svg. On every resize observer cb, I find the position of the reference divs and re-draw the SVG path from scratch.

0 reposts1 like