Hi Zhu, You've noticed a little nuance of the pattern styles in SVG that can be very trying at times. Here is a hacked version of what you want:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="75 75 350 200" width="600" height="400"> <defs> <pattern id="test" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="10"> <rect x="0" y="0" width="20" height="10" fill="white" stroke="none"/> <rect x="10" y="0" width="10" height="5" fill="black" stroke="none"/> <rect x="0" y="5" width="10" height="5" fill="black" stroke="none"/> </pattern> </defs> <path fill="none" stroke="url(#test)" stroke-width="10" d="M 100,100 l 300,1.43969 v 50"/> <path d="M 100,200 l 300, 1.43969 v 50" fill="none" stroke="white" stroke-width="10" stroke-linejoin="butt"/> <path d="M 100,197.5 l 297.5,1.43969 v 50" fill="none" stroke="black" stroke-width="5" stroke-linejoin="butt" stroke-dasharray="10,10"/> <path d="M 100,202.5 l 302.5,1.43969 v 50" fill="none" stroke="black" stroke-width="5" stroke-linejoin="butt" stroke-dasharray="10,10" stroke-dashoffset="10"/> </svg> Please note the sublte changes between this SVG and the one you posted. Not necessarily with the paths that I added, rather with the following specifics: 1. Do not use "null" as a stroke or fill type. Use white or none. 2. Add the svg and xlink namespaces. 3. Try to standardize how you are going to quote your attributes. Use either all " or all '. A mixture doesn't look very nice. 4. Wrap your pattern in a defs section. 5. Try to include a viewBox if at all possible. Also, a note to all the other developers out there. If you change the patternUnits on the pattern element to be objectBoundingBox (in the svg source above) and view the document you notice some huge problems in ASV 3.0. If you zoom in once you get the error "Out of Memory". What happens in the other viewers (I'm still having problems with viewing locally authored SVG files in my Deer Park Alpha 2 :(. Jon Ferraiolo: You folks down at Adobe might want to note this if there is any work on the svg viewer in the future (if you didn't know about it already). Cheers, Alastair http://spark.sourceforge.net --- In [email protected], zhu yang <[EMAIL PROTECTED]> wrote: > Hi, Alastair and members > > Thanks for your reply. But I still have some questions about the pattern. > For example, > I want to draw this line style http://pg.photos.yahoo.com/ph/zhg331/detail?.dir=/f620&.dnm=6999.jpg&.src=ph > > I first defined the pattern, then use "stroke="url(#block)" to draw this line style. But the generated output is not what I am expecting. Is any wrong with my SVG code? > > Thanks. > > <svg> > <pattern id="test" patternUnits='userSpaceOnUse' > x='0' y='0' width='20' height='10'> > <rect x='0' y='0' width='10' height='10' > fill='null' stroke='black'/> > <rect x='0' y='0' width='10' height='5' > fill='black' stroke='black'/> > <rect x='0' y='0' width='10' height='5' > fill='white' stroke='black'/> > <rect x='0' y='5' width='10' height='5' > fill='white' stroke='black'/> > <rect x='10' y='0' width='10' height='5' > fill='black' stroke='black'/> > </pattern> > > <path fill="null" stroke="url(#test)" stroke-width="10" stroke-linejoin="round" d=" > M500,128.61181L800,130.0515"/> > </svg> > > Alastair Fettes <[EMAIL PROTECTED]> wrote: > Hi Zhu, > > You'll want to check out fill patterns in the spec: > > http://www.w3.org/TR/SVG11/pservers.html#Patterns > > The basic idea is to define your fill in a <defs/> section using > symbols and markers as needed, then apply your fill pattern to the > path element. > > ala a modified example from the spec: > > <?xml version="1.0" standalone="no"?> > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> > <svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1" > xmlns="http://www.w3.org/2000/svg";> > <defs> > <pattern id="TrianglePattern" patternUnits="userSpaceOnUse" > x="0" y="0" width="100" height="100" > viewBox="0 0 10 10" > > <path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" /> > </pattern> > </defs> > <!-- Outline the drawing area in blue --> > <rect fill="none" stroke="blue" > x="1" y="1" width="798" height="398"/> > <!-- The ellipse is filled using a triangle pattern paint server > and stroked with black --> > <path d="m 50 50 h 698 l -698 50 > h 698 l -698 50 > h 698 l -698 50 > h 698 l -698 50 > h 698 l -698 50 > h 698 l -698 50 h 698" > stroke="url(#TrianglePattern)" stroke-width="10" fill="none"/> > </svg> > > That should get you to where you want to go. > > Cheers, > Alastair > http://spark.sourceforge.net > > --- In [email protected], zhu yang <[EMAIL PROTECTED]> wrote: > > Hi, group > > I met some difficulties for drawing the following lines with SVG. > Click the hyperlink, you can see the desired line > > > > lane > http://pg.photos.yahoo.com/ph/zhg331/detail?.dir=/f620&.dnm=2d34.jpg&.src=ph > > Bus route > > > http://pg.photos.yahoo.com/ph/zhg331/detail?.dir=/f620&.dnm=d6e0.jpg&.src=ph > > railroad > > > http://pg.photos.yahoo.com/ph/zhg331/detail?.dir=/f620&.dnm=14a0.jpg&.src=ph > > nautical > > > http://pg.photos.yahoo.com/ph/zhg331/detail?.dir=/f620&.dnm=6999.jpg&.src=ph > > tripleGraded > > > http://pg.photos.yahoo.com/ph/zhg331/detail?.dir=/f620&.dnm=7087.jpg&.src=ph > > coutour > > > http://pg.photos.yahoo.com/ph/zhg331/detail?.dir=/f620&.dnm=cdb8.jpg&.src=ph > > > > BTW, the path has been determined. Is it possible to draw these > lines without changing the path. > > > > Thank you very much > > > > > > --------------------------------- > > Start your day with Yahoo! - make it your home page > > > > [Non-text portions of this message have been removed] > > > > > ----- > To unsubscribe send a message to: [EMAIL PROTECTED] > -or- > visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" > ---- > > > > SPONSORED LINKS > Format Data Svg Computer internet > > --------------------------------- > YAHOO! GROUPS LINKS > > > Visit your group "svg-developers" on the web. > > To unsubscribe from this group, send an email to: > [EMAIL PROTECTED] > > Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service. > > > --------------------------------- > > > > __________________________________________________ > Do You Yahoo!? > Tired of spam? Yahoo! Mail has the best spam protection around > http://mail.yahoo.com > > [Non-text portions of this message have been removed] ------------------------ Yahoo! Groups Sponsor --------------------~--> <font face=arial size=-1><a href="http://us.ard.yahoo.com/SIG=12h9a456p/M=362335.6886445.7839731.1510227/D=groups/S=1706030389:TM/Y=YAHOO/EXP=1124844198/A=2894361/R=0/SIG=13jmebhbo/*http://www.networkforgood.org/topics/education/digitaldivide/?source=YAHOO&cmpgn=GRP&RTP=http://groups.yahoo.com/";>In low income neighborhoods, 84% do not own computers. At Network for Good, help bridge the Digital Divide!</a>.</font> --------------------------------------------------------------------~-> ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ---- Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
