Coordinate conversion interface?

[Henrik Andersson]

I've skimmed the CSS feature list, but I can't find this one.

I am looking for a way to take a coordinate that is in the coordinate
space of one element in the DOM and convert it into the equivalent
coordinate, but in the coordinate system of another element in the same DOM.

My usecase is as follows, a javascript would like to run a particle
system and position particles relative to one object, but place them in
another.

[Amelia Bellamy-Royds]

This function exists in SVG in the `getScreenCTM()` and
`getTransformToElement()` methods, but so far has not been adopted by the
Geometry Utils/CSSOM specs for generic CSS transforms.

https://www.w3.org/TR/SVG11/types.html#InterfaceSVGLocatable

In fact, the getTransformToElement() method was dropped from SVG 2 because
of implementators not wanting to add rules for calculating transformations
between elements that are in different SVG contexts (i.e, part of separate
inline <svg> regions in the same document).

Removal resolution is recorded here: https://lists.w3.org/
Archives/Public/www-svg/2015Aug/att-0009/SVGWG-F2F-
minutes-20150824.html#item02

I personally would strongly argue in favour of both these methods being
made available on all elements, as part of a CSSOM spec. They are
incredibly useful when working with dynamically scripted transformed
elements.

Another usecase is creating a zoomable & rotatable SVG diagram with
fixed-size, non-rotating HTML labels. Demo here, which no longer works in
browsers that have removed getTransformToElement() support:
https://codepen.io/AmeliaBR/details/kFDvH/

All that said, adding 3D support might not be trivial, as you'd need to
factor in "flattening" transforms in some way.

~ABR

Post by Henrik Andersson
I've skimmed the CSS feature list, but I can't find this one.
I am looking for a way to take a coordinate that is in the coordinate
space of one element in the DOM and convert it into the equivalent
coordinate, but in the coordinate system of another element in the same DOM.
My usecase is as follows, a javascript would like to run a particle
system and position particles relative to one object, but place them in
another.