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

Re: Wavy line symbol in SVG

Expand Messages
  • 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 1 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 2 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 3 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 4 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 5 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 6 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 7 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.