Loading ...
Sorry, an error occurred while loading the content.

Re: [svg-developers] Re: Wavy line symbol in SVG

Expand Messages
  • Erik Dahlström
    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
    Message 1 of 12 , Feb 6, 2008
    • 0 Attachment
      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 <rindahl@...> 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 svg-developers@yahoogroups.com, "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
    • Andreas Neumann
      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
      Message 2 of 12 , Feb 6, 2008
      • 0 Attachment
        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 svg-developers@yahoogroups.com, Erik Dahlström <ed@...> 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 <rindahl@...>
        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 svg-developers@yahoogroups.com, "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 Dahlström
        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
        Message 3 of 12 , Feb 6, 2008
        • 0 Attachment
          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
          <neumann@...> 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 svg-developers@yahoogroups.com, Erik Dahlström <ed@...> 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 <rindahl@...>
          > 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 svg-developers@yahoogroups.com, "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
        • David Dailey
          At 04:29 AM 2/6/2008, Andreas wrote: Before I saw what Andreas had written I thought of another approach -- using as in this example:
          Message 4 of 12 , Feb 6, 2008
          • 0 Attachment
            At 04:29 AM 2/6/2008, Andreas wrote:

            Before I saw what Andreas had written I thought of another approach
            -- using <marker> as in this example:

            http://srufaculty.sru.edu/david.dailey/svg/symbol.svg

            I put a SMIL animation on the markers since I was having trouble
            figuring out how to position them properly. The animation suggests
            that this approach might work for Bruce's problem, with some possibly
            nontrivial fiddling.

            Andreas, though the approach you recommend makes the most sense, I
            can't get your code to do anything in IE, and while I see a stairstep
            and a sine wave (one period) in FF (2.x) there is no visible font;
            in Opera (9.5) I see a simple sine wave (the font) running linearly
            across the very top of thescreen but it isn't following the second path at all.

            It's a fun problem, cause if we could figure out a non-scripted way
            of doing this, then we'd have a way of deforming textures in a
            nonlinear fashion -- at least in a piecewise fashion. (The individual
            glyphs won't warp)

            I don't see anything other than marker-start, marker-mid and
            marker-end, but if we had marker(pathAtLength(r)) or somesuch, then
            we could position markers all along the path.

            Maybe allowing the layout of elements in a <pattern> to follow a path
            with orient="auto" would be a worthy addition to the arsenal?

            David


            ><?xml version="1.0" encoding="UTF-8"?>
            ><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
            >"<http://www.w3.org/>http://www.w3.org/
            >TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
            ><svg xmlns="<http://www.w3.org/2000/svg>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>
          • brucerindahl
            David First make sure what you copied from Andreas gave is pasted in correctly. I had the same problem until I fixed some of the line breaks. To everyone else
            Message 5 of 12 , Feb 6, 2008
            • 0 Attachment
              David
              First make sure what you copied from Andreas gave is pasted in
              correctly. I had the same problem until I fixed some of the line breaks.
              To everyone else thanks for for the ideas. I am glad I didn't miss
              something obvious.
              Andreas you had the closest attempt but as you say it looks odd with
              sharp angles. To place a marker continuously along a line would work
              but I think it would have a similar issue with sharp corners.

              The following is a copy of method in a GIS program (I raised the issue
              because I need a cartographic symbol). You basically stack a series
              of dashed lines in the correct location. This method does handle
              sharp curves.

              <?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>
              <path id="p1" d="M 100 200 C 300 400 300 0 500 200"/>
              <path id="p2" d="M20,300L300,300v100h200"/>
              </defs>

              <g fill="none" stroke="blue" stroke-linecap="round" >
              <use xlink:href="#p1" stroke-width="5.2" stroke-dasharray="2,28"
              stroke-dashoffset="0" />
              <use xlink:href="#p1" stroke-width="10.2" stroke-dasharray="2,28"
              stroke-dashoffset="2" />
              <use xlink:href="#p1" stroke-width="14.7" stroke-dasharray="2,28"
              stroke-dashoffset="4" />
              <use xlink:href="#p1" stroke-width="18.6" stroke-dasharray="2,28"
              stroke-dashoffset="6" />
              <use xlink:href="#p1" stroke-width="21.7" stroke-dasharray="2,28"
              stroke-dashoffset="8" />
              <use xlink:href="#p1" stroke-width="23.8" stroke-dasharray="2,28"
              stroke-dashoffset="10" />
              <use xlink:href="#p1" stroke-width="24.9" stroke-dasharray="2,28"
              stroke-dashoffset="12" />
              <use xlink:href="#p1" stroke-width="24.9" stroke-dasharray="2,28"
              stroke-dashoffset="14" />
              <use xlink:href="#p1" stroke-width="23.8" stroke-dasharray="2,28"
              stroke-dashoffset="16" />
              <use xlink:href="#p1" stroke-width="21.7" stroke-dasharray="2,28"
              stroke-dashoffset="18" />
              <use xlink:href="#p1" stroke-width="18.6" stroke-dasharray="2,28"
              stroke-dashoffset="20" />
              <use xlink:href="#p1" stroke-width="14.7" stroke-dasharray="2,28"
              stroke-dashoffset="22" />
              <use xlink:href="#p1" stroke-width="10.2" stroke-dasharray="2,28"
              stroke-dashoffset="24" />
              <use xlink:href="#p1" stroke-width="5.2" stroke-dasharray="2,28"
              stroke-dashoffset="26" />
              <use xlink:href="#p1" stroke-width="0" stroke-dasharray="2,28"
              stroke-dashoffset="28" />
              </g>
              <g fill="none" stroke="white" stroke-linecap="round" >
              <use xlink:href="#p1" stroke-width="13" stroke-dasharray="2,28"
              stroke-dashoffset="8" />
              <use xlink:href="#p1" stroke-width="14.3" stroke-dasharray="2,28"
              stroke-dashoffset="10" />
              <use xlink:href="#p1" stroke-width="14.9" stroke-dasharray="2,28"
              stroke-dashoffset="12" />
              <use xlink:href="#p1" stroke-width="14.9" stroke-dasharray="2,28"
              stroke-dashoffset="14" />
              <use xlink:href="#p1" stroke-width="14.3" stroke-dasharray="2,28"
              stroke-dashoffset="16" />
              <use xlink:href="#p1" stroke-width="13" stroke-dasharray="2,28"
              stroke-dashoffset="18" />
              <use xlink:href="#p1" stroke-width="11.1" stroke-dasharray="2,28"
              stroke-dashoffset="20" />
              </g>

              <g fill="none" stroke="blue" stroke-linecap="round" >
              <use xlink:href="#p2" stroke-width="5.2" stroke-dasharray="2,28"
              stroke-dashoffset="0" />
              <use xlink:href="#p2" stroke-width="10.2" stroke-dasharray="2,28"
              stroke-dashoffset="2" />
              <use xlink:href="#p2" stroke-width="14.7" stroke-dasharray="2,28"
              stroke-dashoffset="4" />
              <use xlink:href="#p2" stroke-width="18.6" stroke-dasharray="2,28"
              stroke-dashoffset="6" />
              <use xlink:href="#p2" stroke-width="21.7" stroke-dasharray="2,28"
              stroke-dashoffset="8" />
              <use xlink:href="#p2" stroke-width="23.8" stroke-dasharray="2,28"
              stroke-dashoffset="10" />
              <use xlink:href="#p2" stroke-width="24.9" stroke-dasharray="2,28"
              stroke-dashoffset="12" />
              <use xlink:href="#p2" stroke-width="24.9" stroke-dasharray="2,28"
              stroke-dashoffset="14" />
              <use xlink:href="#p2" stroke-width="23.8" stroke-dasharray="2,28"
              stroke-dashoffset="16" />
              <use xlink:href="#p2" stroke-width="21.7" stroke-dasharray="2,28"
              stroke-dashoffset="18" />
              <use xlink:href="#p2" stroke-width="18.6" stroke-dasharray="2,28"
              stroke-dashoffset="20" />
              <use xlink:href="#p2" stroke-width="14.7" stroke-dasharray="2,28"
              stroke-dashoffset="22" />
              <use xlink:href="#p2" stroke-width="10.2" stroke-dasharray="2,28"
              stroke-dashoffset="24" />
              <use xlink:href="#p2" stroke-width="5.2" stroke-dasharray="2,28"
              stroke-dashoffset="26" />
              <use xlink:href="#p2" stroke-width="0" stroke-dasharray="2,28"
              stroke-dashoffset="28" />
              </g>
              <g fill="none" stroke="white" stroke-linecap="round" >
              <use xlink:href="#p2" stroke-width="13" stroke-dasharray="2,28"
              stroke-dashoffset="8" />
              <use xlink:href="#p2" stroke-width="14.3" stroke-dasharray="2,28"
              stroke-dashoffset="10" />
              <use xlink:href="#p2" stroke-width="14.9" stroke-dasharray="2,28"
              stroke-dashoffset="12" />
              <use xlink:href="#p2" stroke-width="14.9" stroke-dasharray="2,28"
              stroke-dashoffset="14" />
              <use xlink:href="#p2" stroke-width="14.3" stroke-dasharray="2,28"
              stroke-dashoffset="16" />
              <use xlink:href="#p2" stroke-width="13" stroke-dasharray="2,28"
              stroke-dashoffset="18" />
              <use xlink:href="#p2" stroke-width="11.1" stroke-dasharray="2,28"
              stroke-dashoffset="20" />
              </g>

              </svg>

              Of course now I have a double wavy line. If there were another
              parameter available in the spec to allow a stroke offset left or right
              of the line this method would work fine. For example:
              stroke-offset="5" would draw a line 5 units to the the right of a
              path while stroke-offset="-5" would draw it to the left. This is
              available in my GIS program and it is how complex line symbols are drawn.

              Thanks for the ideas!

              Bruce

              --- In svg-developers@yahoogroups.com, David Dailey
              <david.dailey@...> wrote:
              >
              > At 04:29 AM 2/6/2008, Andreas wrote:
              >
              > Before I saw what Andreas had written I thought of another approach
              > -- using <marker> as in this example:
              >
              > http://srufaculty.sru.edu/david.dailey/svg/symbol.svg
              >
              > I put a SMIL animation on the markers since I was having trouble
              > figuring out how to position them properly. The animation suggests
              > that this approach might work for Bruce's problem, with some possibly
              > nontrivial fiddling.
              >
              > Andreas, though the approach you recommend makes the most sense, I
              > can't get your code to do anything in IE, and while I see a stairstep
              > and a sine wave (one period) in FF (2.x) there is no visible font;
              > in Opera (9.5) I see a simple sine wave (the font) running linearly
              > across the very top of thescreen but it isn't following the second
              path at all.
              >
              > It's a fun problem, cause if we could figure out a non-scripted way
              > of doing this, then we'd have a way of deforming textures in a
              > nonlinear fashion -- at least in a piecewise fashion. (The individual
              > glyphs won't warp)
              >
              > I don't see anything other than marker-start, marker-mid and
              > marker-end, but if we had marker(pathAtLength(r)) or somesuch, then
              > we could position markers all along the path.
              >
              > Maybe allowing the layout of elements in a <pattern> to follow a path
              > with orient="auto" would be a worthy addition to the arsenal?
              >
              > David
              >
              >
              > ><?xml version="1.0" encoding="UTF-8"?>
              > ><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
              > >"<http://www.w3.org/>http://www.w3.org/
              > >TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
              > ><svg xmlns="<http://www.w3.org/2000/svg>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>
              >
            • brucerindahl
              My final solution to this was to use a variant of the font method given by Andreas. I split the wave into four parts and assigned a different letter to each
              Message 6 of 12 , Feb 19, 2008
              • 0 Attachment
                My final solution to this was to use a variant of the font method
                given by Andreas. I split the wave into four parts and assigned a
                different letter to each part. The glyph's were unclosed lines without
                fill so the stroke width can be controlled. Each glyph was 26 unit
                long with an advancement of 25 units so there is a slight overlap to
                give a continuous line. Adding stroke-linecap="round" gives the final
                touch.

                The final version is as follows:
                <?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="a" horiz-adv-x="25" d="M 0 0 C
                10 10 15 15 26 15 " />
                <glyph unicode="b" horiz-adv-x="25" d="M 0 15 C
                10 15 15 10 26 0 " />
                <glyph unicode="c" horiz-adv-x="25" d="M 0 0 C
                10 -10 15 -15 26 -15 " />
                <glyph unicode="d" horiz-adv-x="25" d="M 0 -15 C
                10 -15 15 -10 26 0 " />
                </font>
                </defs>
                <path id="myFirstPath" fill="none" stroke="blue" stroke-width="2"
                d="M20,300L300,300v100h200"/>
                <text font-family="My Font" font-size="40" fill="none" stroke="red" >
                <textPath xlink:href="#myFirstPath" >
                abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</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="40" fill="none" stroke="green"
                stroke-width="2" stroke-linecap="round" >
                <textPath xlink:href="#mySecondPath">
                abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</textPath>
                </text>
                </svg>


                Thanks for all the help!
                Bruce
              • ddailey
                Thanks for the update-- quite nice! David ... From: brucerindahl To: svg-developers@yahoogroups.com Sent: Tuesday, February 19, 2008 4:58 PM Subject:
                Message 7 of 12 , Feb 19, 2008
                • 0 Attachment
                  Thanks for the update-- quite nice!

                  David
                  ----- Original Message -----
                  From: brucerindahl
                  To: svg-developers@yahoogroups.com
                  Sent: Tuesday, February 19, 2008 4:58 PM
                  Subject: [svg-developers] Re: Wavy line symbol in SVG


                  My final solution to this was to use a variant of the font method
                  given by Andreas. I split the wave into four parts and assigned a
                  different letter to each part. The glyph's were unclosed lines without
                  fill so the stroke width can be controlled. Each glyph was 26 unit
                  long with an advancement of 25 units so there is a slight overlap to
                  give a continuous line. Adding stroke-linecap="round" gives the final
                  touch.

                  The final version is as follows:
                  <?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="a" horiz-adv-x="25" d="M 0 0 C
                  10 10 15 15 26 15 " />
                  <glyph unicode="b" horiz-adv-x="25" d="M 0 15 C
                  10 15 15 10 26 0 " />
                  <glyph unicode="c" horiz-adv-x="25" d="M 0 0 C
                  10 -10 15 -15 26 -15 " />
                  <glyph unicode="d" horiz-adv-x="25" d="M 0 -15 C
                  10 -15 15 -10 26 0 " />
                  </font>
                  </defs>
                  <path id="myFirstPath" fill="none" stroke="blue" stroke-width="2"
                  d="M20,300L300,300v100h200"/>
                  <text font-family="My Font" font-size="40" fill="none" stroke="red" >
                  <textPath xlink:href="#myFirstPath" >
                  abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</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="40" fill="none" stroke="green"
                  stroke-width="2" stroke-linecap="round" >
                  <textPath xlink:href="#mySecondPath">
                  abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</textPath>
                  </text>
                  </svg>

                  Thanks for all the help!
                  Bruce





                  [Non-text portions of this message have been removed]
                • ddailey
                  Now, if you someone can just figure out how to get SMIL animation to follow those nice wavy paths! Seriously, I ve been interested in that problem for some
                  Message 8 of 12 , Feb 19, 2008
                  • 0 Attachment
                    Now, if you someone can just figure out how to get SMIL animation to follow those nice wavy paths!

                    Seriously, I've been interested in that problem for some time in an allied context -- see http://srufaculty.sru.edu/david.dailey/svg/tiles.svg

                    The idea is to be able to simulate traffic on arbitrary random highways systems (or neural activation). The tiles (implemented here as the 35 topological identifications of pairs of edges of octagons (represented here, for ease of planar tiling, as lines from sides of squares) form a nice alphabet (with or without rotation) -- see here for a cryptological application http://srufaculty.sru.edu/david.dailey/javascript/traverse.html .

                    I've been avoiding writing a script to move little critters along these composite paths, partly since the code I wrote here many years ago is so messy that I should just burn it down and start over, and partly since I know it'd be difficult to identify matching parts of pathways. I think I might start with a triangular tessellation since the 5 glyphs of hexagonal point-set topology (5 x 3 x 1 / 3 symmetries) would be easier to deal with than the 35 of the octagonal edge mappings.

                    The problem in your case, of identifying start and endpoints of pathsegments that have been replicated as parts of a font (particularly as laid out on a curve), seems even more intractable to my current thinking. Any ideas?

                    David

                    ----- Original Message -----
                    From: brucerindahl
                    To: svg-developers@yahoogroups.com
                    Sent: Tuesday, February 19, 2008 4:58 PM
                    Subject: [svg-developers] Re: Wavy line symbol in SVG


                    My final solution to this was to use a variant of the font method
                    given by Andreas. I split the wave into four parts and assigned a
                    different letter to each part. The glyph's were unclosed lines without
                    fill so the stroke width can be controlled. Each glyph was 26 unit
                    long with an advancement of 25 units so there is a slight overlap to
                    give a continuous line. Adding stroke-linecap="round" gives the final
                    touch.

                    The final version is as follows:
                    <?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="a" horiz-adv-x="25" d="M 0 0 C
                    10 10 15 15 26 15 " />
                    <glyph unicode="b" horiz-adv-x="25" d="M 0 15 C
                    10 15 15 10 26 0 " />
                    <glyph unicode="c" horiz-adv-x="25" d="M 0 0 C
                    10 -10 15 -15 26 -15 " />
                    <glyph unicode="d" horiz-adv-x="25" d="M 0 -15 C
                    10 -15 15 -10 26 0 " />
                    </font>
                    </defs>
                    <path id="myFirstPath" fill="none" stroke="blue" stroke-width="2"
                    d="M20,300L300,300v100h200"/>
                    <text font-family="My Font" font-size="40" fill="none" stroke="red" >
                    <textPath xlink:href="#myFirstPath" >
                    abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</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="40" fill="none" stroke="green"
                    stroke-width="2" stroke-linecap="round" >
                    <textPath xlink:href="#mySecondPath">
                    abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</textPath>
                    </text>
                    </svg>

                    Thanks for all the help!
                    Bruce





                    [Non-text portions of this message have been removed]
                  Your message has been successfully submitted and would be delivered to recipients shortly.