SVG Layer with perspective

[grahambates-sp]

I am trying to get a SVG layer moving in sync with a deckgl layer when the map is tilted/pitched.

From the following link you can see the 2 layers

https://codesandbox.io/s/d3-volonoi-overlay-y2ubs

If you navigate to line 47 in svg-overlay.js and put the style attribute back in, you will witness the perspective is fixed but now each element has lost its position on the map (bizarely, this also happens on the deckgl layer).

Has anyone else encountered this and found a solution?

[grahambates-sp]

If anyone else encounters this, I worked out how to do it.

In Chrome at least, it is possible to do the following. I dont think all browsers support these transforms in svg however.

.styles(d => ({
        "transform-origin": `0px  ${d[1]}px`,
        transform: `rotate3d(1, 0, 0, ${viewport.pitch}deg)`
      }));

(You will need to import d3-selection-multi for this to work. See here.

https://codesandbox.io/s/d3-volonoi-overlay-rnjhh

[tgorkin]

Thanks for following up with a solution!