Re: Warp Text functions in SVG?
You are right on target with what I'm trying to accomplish.
In high-end graphics apps like CorelDRAW and Illustrator, you can
apply an 'envelope' function to an object that gives you the ability
to shape the object like putty.
Illustrator has an envelope 'mesh' that allows you to warp individual
sectors of an object (or the entire object) with a grid overlay, in
the manner you describe.
I'm trying to accomplish the same thing in SVG, to allow the site
visitors to shape their text in several pre-defined ways - in a
vertical arc (convex top, concave bottom, vertical sides) or a
bridged arc (concave bottom/flat top, vertical sides).
I can 'fake' it using your technique, faking the arc by moving the
base and skewing the text vertically, but it's not accurate enough.
The customer's goal is to be able to convert the final SVG art into
Corel or Illustrator files for color separation and printing.
--- In email@example.com, Philippe Lhoste <pl-mlnl@G...>
> Philippe Lhoste wrote:have
> >> Any ideas for direction on how to accomplish this? Am I going to
> >> to write my own function that warps the text into the shapesthey
> >> want? I can't seem to find any sort of envelope or morphingletter.
> >> capabilities built into SVG 1.1.
> > I fear no. You may have to do matrix transformations on each
> > Or perhaps even more complex transformation, if each node of theletter
> > path need a specific transformation, like deforming the initialto do a
> > rectangle bound by moving each corner in arbitrary location, eg.
> > pyramid.native
> > I am not good enough in geometry to see if that can be done in
> > SVG 1.1.yesterday
> Well, the geometry seems to be quite simple after all. I make
> the needed maths, I just have to put this in a script to see if itworks...
> Caveat: The needed transformations can be done only on path
> Ie. with my method, you can't transform shapes like circle, rect oreven
> plain text.simple
> That mean that you must put all your drawing into path. This is
> for most basic shapes, but harder for text.couple of
> You have to transform your TrueType font to SVG font (I know a
> Java programs that can do that), but then you have to transformagain
> the generated glyphs to plain SVG (they are upside down and theyuse
> their own viewbox) as we must apply the transform to each letter,or
> relative to its position (ie. a T on the left may have a different
> transform that a T on the right).
> That done, my little math is quite simple to apply if you do only a
> simple rectangle deforming, eg. to a trapezoid.
> If you need more complex transformations, like applying a grid on a
> graphics, and deforming this grid to make, say, a flag, a concave
> convex cushion, etc., we need to compute also the intersection ofthe
> graphics with the grid, otherwise the results wouldn't be good(long
> stripe not following curvature, etc.).will
> I can do that using Kevin Lindsey's intersection algorithms, but it
> take some time.on a
> I believe I will first do a proof of concept script, doing a static
> transformation of path using static grid deformation data.
> Ideally, one should write a SVG file where a grid would be overlaid
> graphics, allowing to move grid nodes around with some constraints,and
> computing transformation either when clicking on a button, or ifspeed
> allows, in real time (or on button up).of
> I have to improve my JS/Dom knowledge before doing such thing...
> Funny that nobody I know did such a thing before. I visited a lot
> SVG-related sites (not all existing!) and this seems to be anunexplored
> Philippe Lhoste
> -- (near) Paris -- France
> -- Professional programmer and amateur artist
> -- http://Phi.Lho.free.fr
> -- -- -- -- -- -- -- -- -- -- -- --