0

I followed this thread here (unfortunately its very old, ancient I would say): Perspective transform of SVG paths (four corner distort)

And this thread contains great pdf explaining how calcuations are done (see below).

Question: in the original post author says the approach will work for simple paths but not arcs. Can someone help me understand - would the approach work for Bezier curves? The font used in the example obviously is using curves though...

enter image description here

Sergey Rudenko
  • 7,471
  • 2
  • 19
  • 36
  • What don't you understand about the CSS answer? https://stackoverflow.com/a/28397315/1038015 – Robert Longson Jan 09 '18 at 16:49
  • Hey Robert (btw I learned A LOT thanks to you - thank you!:). CSS 3D transforms are not applicable at the SVG element level afaik. Hence I can't use those (although I checked this example here: https://bl.ocks.org/mbostock/10571478 and it is impressive). The problem I am trying to solve is ability to apply these 4 point distortions at a given SVG element level provided all of those are paths. Nuance is that my paths always use quadratic or cubic bezier... – Sergey Rudenko Jan 09 '18 at 17:26
  • CSS 3d transforms work in Firefox and as far as I know Chrome on SVG elements. There may of course be bugs. – Robert Longson Jan 09 '18 at 17:47
  • I will try to check that. For my goals I need to ensure transform: matrix3d(...) is what works. Will test and see. – Sergey Rudenko Jan 09 '18 at 18:30
  • Hmm ok so even though css did work for me in chrome i want to explore option where i obtain “new” coordinates from a script and then update my elements. Will do a pilot tonight and see how far i can go. CSS based solution wouldnt fit mostly cause i want to do arbitrary positions for the frame – Sergey Rudenko Jan 09 '18 at 21:57
  • I think You can convert [BEZIER to interpolation cubic](https://stackoverflow.com/a/22582447/2521214), apply perspective on the control points and than convert back to BEZIER and use that in your SVG. The result however could a bit differ from real perspective applied to your original BEZIER. To improve accuracy you can resample your BEZIER to more BEZIER patches ... – Spektre Jan 10 '18 at 07:58

1 Answers1

2

One can apply affine transformations to the control points of Bezier curve and get transformed Bezier curve.

But perspective transformations are not applicable to "usual" (used in fonts) Bezier curves - they produce rational Bezier curves.

MBo
  • 66,413
  • 3
  • 45
  • 68
  • I see, so if I will use approach in this example here: https://bl.ocks.org/mbostock/10591444 - it will not work for paths that contain Bezier correct? – Sergey Rudenko Jan 10 '18 at 21:05
  • This example calculates matrix of persp. transformation.Thus transfromation transforms points to points and straight line segments to straight line segments. But if you apply it to control points of Bezier curve, resulting control points will describe another curve - if you transform intermediate points of curve (as points), they will differ from corresponding points of transformed Bezier. I think that result would be quite close for small perspective distortions, but for strong distortions curve could essentially deviate. – MBo Jan 11 '18 at 05:16