Wavy line symbol in SVG

[brindahl]

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

[David Dailey]

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@...
  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]

[brindahl]

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@..., "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@...
>   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]
>

[Jonathan Chetwynd]

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 Dahlstrom]

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@..., "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


-----
To unsubscribe send a message to: svg-developers-unsubscribe@...
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    mailto:svg-developers-digest@...
    mailto:svg-developers-fullfeatured@...

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe@...

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/
 

[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
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@..., 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@..., "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]

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@..., 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@..., "ddailey" <ddailey@> wrote:
>> >>
>> >> Do you mean something like this?
>> >>
>> >> <svg  xmlns="http://www.w3.org/2000/svg"
>> >>  xmlns:xlink="http://www.w3.org/1999/xlink" >
>> >>  <defs>
>> >>   <symbol id="S">
>> >>    <path id="u" d="M 5 60 C 20 100 25 20 40 60" />
>> >>    <use transform="translate(35,0)" xlink:href="#u"/>
>> >>    <use transform="translate(70,0)" xlink:href="#u"/>
>> >>   </symbol>
>> >>  </defs>
>> >>      <use x="60" y="0" transform="scale(2, 4)"  width="200"
>> > height="100" fill="none" stroke-width="2" stroke="red"
> xlink:href="#S"/>
>> >> </svg>
>> >>
>> >> You can adjust the wavelength and amplitude through pthe scale
>> > transform associated with the <use>.
>> >>
>> >> Perhaps you have something else in mind?
>>
>> --
>> Erik Dahlstrom, Core Technology Developer, Opera Software
>> Co-Chair, W3C SVG Working Group
>> Personal blog: http://my.opera.com/macdev_ed
>>
>
>

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed


-----
To unsubscribe send a message to: svg-developers-unsubscribe@...
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    mailto:svg-developers-digest@...
    mailto:svg-developers-fullfeatured@...

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe@...

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/
 

[Dailey, David P.]

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>

[brindahl]

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@..., 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>
>

[David Dailey]

Bruce, I like what you're doing with stroke-dasharray here. Using script to vary the stroke-dashoffset could make some very nice textures.

The whole thread, particularly Andreas' use of fonts made me think about using textpaths to lay out nonlinear gradients and patterns using user-defined fonts and textPaths. So I tried the following code, which worked pretty neatly in IE/ASV3, but fell apart in Opera 9.5 beta (build 9613).

I have not done much with glyphs (since I tended to think of them as text), but the spec seems to allow not just paths but any graphic to be inserted between <glyph> and </glyph>.  That should mean (as in my example) that we can create gradients of any shape we want -- not exactly the full range of nonlinear gradients but at least what Claris Draw used to call "shape-gradients".

In the example I have added a bit of transparency to the middle stop, so one can see the underlying texture of the glyphs. It is particularly cool if one adds a  <animateTransform dur="3s" type="rotate" from="0,.5,.5" to="360,.5,.5" repeatCount="indefinite" attributeName="gradientTransform"/>
 to the linear gradient

So is my inability to get it working in Opera something I screwed up or a feature not yet implemented?


David
-------------
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%"
viewBox="130 20 300 200">
    <defs>
        <font horiz-adv-x="100">
            <font-face font-family="My Font"  units-per-em="100"/>
            <missing-glyph />
            <glyph unicode="p" >
   <path d="M 20 280 L 230 280 230 -160 20 -160z"
stroke="none" stroke-width="2" fill="url(#g)" />
<linearGradient id="g" gradientTransform="rotate(90 .5 .5)">
<stop offset="0" stop-color="#880"/>
<stop offset=".25" stop-color="#ff8"/>
<stop offset=".5" stop-color="#f0f" stop-opacity=".25"/>
<stop offset=".75" stop-color="#ff8"/>
<stop offset="1"  stop-color="#880"/>
</linearGradient>
   </glyph>
        </font>
    </defs>
   <path id="P0" 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="10" fill="red">
        <textPath xlink:href="#P0" method="stretch"> ppppppppppppppppppppppppppppppppppppppppppppp </textPath>
    </text>
     <path id="P1" fill="none" stroke="blue" stroke-width="2" d="M 100 155 C 330 330 320 -70 500 160"/>
    <text font-family="My Font" font-size="10" fill="red">
        <textPath xlink:href="#P1" method="stretch"> ppppppppppppppppppppppppppppppppppppppppppppp </textPath>
    </text>
 
</svg>

----- Original Message -----
On  Wednesday, February 06, 2008 at 3:54 PM  Bruce wrote: 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.

Yes, I indeed missed some line breaks.

 
 

[Non-text portions of this message have been removed]

[Andreas Neumann]

Hi David,

Opera so far only implements the "d" attribute in a glyph, not
arbitrary SVG content within a glyph. Thats why SVG fonts work fine
when the geometry is defined in the "d" attribute of the glyph
element, but not additional content as you use it. This only works
fine in ASV and Batik, haven't tried the latest webkit though.

Andreas

--- In svg-developers@..., "ddailey" <ddailey@...> wrote:
>
> Bruce, I like what you're doing with stroke-dasharray here. Using
script to vary the stroke-dashoffset could make some very nice
textures.
>
> The whole thread, particularly Andreas' use of fonts made me think
about using textpaths to lay out nonlinear gradients and patterns
using user-defined fonts and textPaths. So I tried the following
code, which worked pretty neatly in IE/ASV3, but fell apart in Opera
9.5 beta (build 9613).
>
> I have not done much with glyphs (since I tended to think of them
as text), but the spec seems to allow not just paths but any graphic
to be inserted between <glyph> and </glyph>.  That should mean (as in
my example) that we can create gradients of any shape we want -- not
exactly the full range of nonlinear gradients but at least what
Claris Draw used to call "shape-gradients".
>
> In the example I have added a bit of transparency to the middle
stop, so one can see the underlying texture of the glyphs. It is
particularly cool if one adds a  <animateTransform dur="3s"
type="rotate" from="0,.5,.5" to="360,.5,.5" repeatCount="indefinite"
attributeName="gradientTransform"/>
>  to the linear gradient
>
> So is my inability to get it working in Opera something I screwed
up or a feature not yet implemented?

>
>
> David
> -------------
> <svg xmlns="http://www.w3.org/2000/svg"
> xmlns:xlink="http://www.w3.org/1999/xlink"
> width="100%" height="100%"
> viewBox="130 20 300 200">
>     <defs>
>         <font horiz-adv-x="100">
>             <font-face font-family="My Font"  units-per-em="100"/>
>             <missing-glyph />
>             <glyph unicode="p" >
>    <path d="M 20 280 L 230 280 230 -160 20 -160z"
> stroke="none" stroke-width="2" fill="url(#g)" />
> <linearGradient id="g" gradientTransform="rotate(90 .5 .5)">
> <stop offset="0" stop-color="#880"/>
> <stop offset=".25" stop-color="#ff8"/>
> <stop offset=".5" stop-color="#f0f" stop-opacity=".25"/>
> <stop offset=".75" stop-color="#ff8"/>
> <stop offset="1"  stop-color="#880"/>
> </linearGradient>
>    </glyph>
>         </font>
>     </defs>
>    <path id="P0" 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="10" fill="red">
>         <textPath xlink:href="#P0" method="stretch">
ppppppppppppppppppppppppppppppppppppppppppppp </textPath>
>     </text>
>      <path id="P1" fill="none" stroke="blue" stroke-width="2" d="M
100 155 C 330 330 320 -70 500 160"/>
>     <text font-family="My Font" font-size="10" fill="red">
>         <textPath xlink:href="#P1" method="stretch">
ppppppppppppppppppppppppppppppppppppppppppppp </textPath>
>     </text>
>  
> </svg>
>
> ----- Original Message -----
> On  Wednesday, February 06, 2008 at 3:54 PM  Bruce wrote: 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.
>
> Yes, I indeed missed some line breaks.
>
>  
>  
>
> [Non-text portions of this message have been removed]
>

[brindahl]

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

[David Dailey]

Thanks for the update-- quite nice!  

David
  ----- Original Message -----
  From: brucerindahl
  To: svg-developers@...
  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]

[David Dailey]

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@...
  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]