Hi Andreas, Nothing wrong with your example, but the effect is quite subtle on your font, a larger amplitude will show you that the glyphs are indeed stretched. However, I think this will still not give a satisfying result by itself, but it depends on the curve.
Another way, which may be a bit of a pain arguably, is to do placement using script, creating custom shapes rotated to follow the line. The SVGMatrix DOM methods and SVGPathElement methods 'getPointAtLength' and 'getPathSegAtLength' might help a bit. If you want the rotations you can go the textPath route again, see the SVGTextContentElement method 'getRotationOfChar', but note that you need to know the font advances beforehand, for example by creating a small svgfont. Cheers /Erik On Wed, 06 Feb 2008 10:29:41 +0100, Andreas Neumann <[EMAIL PROTECTED]> wrote: > Hi Erik and others, > > I tried the method with text on path. However, in Opera, I don't see > any difference at all when using method="stretch" when compared to > method="align". Anything I am doing wrong? > > Here is my file: > > <?xml version="1.0" encoding="UTF-8"?> > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/ > TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> > <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http:// > www.w3.org/1999/xlink" width="100%" height="100%"> > <defs> > <font id="myFont" horiz-adv-x="100"> > <font-face font-family="My Font" units-per-em="100"/> > <missing-glyph horiz-adv-x="100"/> > <glyph unicode="p" horiz-adv-x="100" d="M 0 0 L 2.5 0 C > 50 45 50 -50 102.5 0 L 97.5 0 C 50 -45 50 50 -2.5 0 Z" /> > </font> > </defs> > <path id="myFirstPath" fill="none" stroke="blue" stroke- > width="2" d="M20,300L300,300v100h200"/> > <text font-family="My Font" font-size="60" fill="red"> > <textPath xlink:href="#myFirstPath" method="stretch"> > ppppppppppppppppppppppppppppppppppp </textPath> > </text> > <path id="mySecondPath" fill="none" stroke="blue" stroke- > width="2" d="M 100 100 C 300 300 300 -100 500 100"/> > <text font-family="My Font" font-size="60" fill="red"> > <textPath xlink:href="#mySecondPath" method="stretch"> > ppppppppppppppppppppppppppppppppppp </textPath> > </text> > </svg> > > Thank you for having a look it. > > I think this would probably come close to what Bruce wants but it > doesn't properly align when using curves (see upper example). Of > course, I wouldn't expect it to work when there are discontinuities > (lower example), but it would be nice if the glyphs would properly > connect on the upper example. > > Andreas > > --- In [email protected], Erik Dahlström <[EMAIL PROTECTED]> > wrote: >> >> Have you tried making that into an SVGFont + text-on-a-path? >> Using that it should be possible to get the effect of something > similar to >> a custom stroke that follows a path. Adding method="stretch" on > the >> textPath element may make it look better, but it depends. >> >> Cheers >> /Erik >> >> On Tue, 05 Feb 2008 22:14:54 +0100, brucerindahl <[EMAIL PROTECTED]> > wrote: >> >> > David >> > This is close but I want to specify a path and have it drawn with > this >> > symbol along the entire length of the path. It is kind of like >> > specifying a dash-array that is then repeated along the path. Is > this >> > possible? >> > Bruce >> > >> > --- In [email protected], "ddailey" <ddailey@> wrote: >> >> >> >> Do you mean something like this? >> >> >> >> <svg xmlns="http://www.w3.org/2000/svg"; >> >> xmlns:xlink="http://www.w3.org/1999/xlink"; > >> >> <defs> >> >> <symbol id="S"> >> >> <path id="u" d="M 5 60 C 20 100 25 20 40 60" /> >> >> <use transform="translate(35,0)" xlink:href="#u"/> >> >> <use transform="translate(70,0)" xlink:href="#u"/> >> >> </symbol> >> >> </defs> >> >> <use x="60" y="0" transform="scale(2, 4)" width="200" >> > height="100" fill="none" stroke-width="2" stroke="red" > xlink:href="#S"/> >> >> </svg> >> >> >> >> You can adjust the wavelength and amplitude through pthe scale >> > transform associated with the <use>. >> >> >> >> Perhaps you have something else in mind? >> >> -- >> Erik Dahlstrom, Core Technology Developer, Opera Software >> Co-Chair, W3C SVG Working Group >> Personal blog: http://my.opera.com/macdev_ed >> > > -- Erik Dahlstrom, Core Technology Developer, Opera Software Co-Chair, W3C SVG Working Group Personal blog: http://my.opera.com/macdev_ed ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ---- Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
