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

Wavy line symbol in SVG

Expand Messages
  • brucerindahl
    Does anyone know how to create a wavy line symbol in SVG? I am thinking a symbol similar to a sine wave along a path. Any ideas or hints would be
    Message 1 of 12 , Feb 5, 2008
    • 0 Attachment
      Does anyone know how to create a "wavy" line symbol in SVG? I am
      thinking a symbol similar to a sine wave along a path. Any ideas or
      hints would be appreciated.
      Thanks!
      Bruce
    • ddailey
      Do you mean something like this?
      Message 2 of 12 , Feb 5, 2008
      • 0 Attachment
        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?

        regards,
        David

        ----- Original Message -----
        From: brucerindahl
        To: svg-developers@yahoogroups.com
        Sent: Tuesday, February 05, 2008 11:39 AM
        Subject: [svg-developers] Wavy line symbol in SVG


        Does anyone know how to create a "wavy" line symbol in SVG? I am
        thinking a symbol similar to a sine wave along a path. Any ideas or
        hints would be appreciated.
        Thanks!
        Bruce





        [Non-text portions of this message have been removed]
      • brucerindahl
        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
        Message 3 of 12 , Feb 5, 2008
        • 0 Attachment
          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?
          >
          > regards,
          > David
          >
          > ----- Original Message -----
          > From: brucerindahl
          > To: svg-developers@yahoogroups.com
          > Sent: Tuesday, February 05, 2008 11:39 AM
          > Subject: [svg-developers] Wavy line symbol in SVG
          >
          >
          > Does anyone know how to create a "wavy" line symbol in SVG? I am
          > thinking a symbol similar to a sine wave along a path. Any ideas or
          > hints would be appreciated.
          > Thanks!
          > Bruce
          >
          >
          >
          >
          >
          > [Non-text portions of this message have been removed]
          >
        • "~:'' ありがとうございました
          Bruce, you haven t described your intention clearly. do you want a sine wave on a path which it is possible to mimic at least[1]? or do you want a symbol
          Message 4 of 12 , Feb 5, 2008
          • 0 Attachment
            Bruce,

            you haven't described your intention clearly.
            do you want a sine wave on a path which it is possible to mimic at
            least[1]?
            or do you want a symbol repeated along a path which is also possible[2]?
            they are not the same.

            however it would also be nice to simply be able to set the amplitude
            or wavelength of a line along a path which iirc is not possible.

            Having said which, Doug created some nice examples changing line-
            width along a line. and one could of course change the amplitude
            along the line....

            regards

            Jonathan Chetwynd
            Accessibility Consultant on Media Literacy and the Internet

            "specify a path and have it drawn with this symbol along the entire
            length of the path"

            "a sine wave along a path"
          • 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 5 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 6 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 7 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 8 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 9 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 10 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 11 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 12 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.