Andreas, Thomas, Thank you for the replies and example. The carto.net site has been very helpful too. The method of using glyphs & textPath seems to be working well. I've added a script to my test svg to calculate the path length & number of glyphs I will need. Viewing the svg using Adobe works fine, but I'm having problems viewing it with squiggle. In the svg I have a defs section which defines an svg the glyph will use, the font, font-face, glyph information. I also have an empty text element, which is just a placeholder for the glyph string. Once I've created the glyph string in the script, I add it to this text element. Then the textPath's tref element references it. Using this method, the svg displays correctly with Adobe. However, when I view it in squiggle, the glyphs do not show up. I can only get the glyphs to show up in squiggle if I add the glyph string directly to the textPath element and don't use tref. I prefer to use tref though, as this svg will become a skeleton svg defining the glyph information when I start drawing in java using the JSVGCanvas. My svg is attached & displayed below. Any thoughts as to why this svg won't display correctly in squiggle?
Thank you. Amy <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd";> <svg onload="load(evt)" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> <script type="text/ecmascript"><![CDATA[ var svgNS = "http://www.w3.org/2000/svg";; function load(evt) { var doc = evt.target.ownerDocument; var path = doc.getElementById("geometry"); var pathLength = path.getTotalLength(); var glyphDefs = doc.getElementById("glyphDefs"); var symbolSVG = glyphDefs.getElementsByTagNameNS(svgNS, "svg").item(0); var widthAttribute = symbolSVG.getAttributeNS(null, "width"); var patternWidth = parseFloat(widthAttribute.substring(0, widthAttribute.length - 2)); var numGlyphs = Math.floor((pathLength / patternWidth) * 2); var glyphsStr = ""; for (var i = 0; i <= numGlyphs; i++) { glyphsStr += "A"; } var glyphText = doc.getElementById("glyphText"); var glyphTextStr = doc.createTextNode(glyphsStr); glyphText.appendChild(glyphTextStr); } ]]></script> <defs id="glyphDefs"> <svg id="externalSVG" xmlns="http://www.w3.org/2000/svg"; xml:space="preserve" width="20mm" height="4mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 20 4"> <defs> <style type="text/css"> <![CDATA[ .str0 {stroke:#1F1A17;stroke-width:0.0762} .fil0 {fill:none} ]]> </style> </defs> <g id="Layer_x0020_1"> <metadata id="CorelCorpID_0Corel-Layer"/> <g id="_130460088"> <line id="_130899904" class="fil0 str0" x1="7.0003" y1="2" x2="12.9997" y2= "2" /> <polyline id="_250550624" class="fil0 str0" points=" 8.3941,2 10,0.2426 11.6059,2 "/> </g> <g id="_130852712"> <line id="_130899952" class="fil0 str0" x1="0.001" y1="2" x2="6.0004" y2= "2" /> <polyline id="_131928128" class="fil0 str0" points=" 1.3948,2 3.0007,0.2426 4.6066,2 "/> </g> <g id="_131074480"> <line id="_131055736" class="fil0 str0" x1="13.9693" y1="2" x2="19.9687" y2= "2" /> <polyline id="_131055656" class="fil0 str0" points=" 15.3631,2 16.969,0.2426 18.5749,2 "/> </g> </g> </svg> <font id="myFont"> <font-face font-family="myFont" units-per-em="20" font-stretch="semi-expanded"/> <missing-glyph horiz-adv-x="21"/> <glyph unicode="A" horiz-adv-x="21"> <g> <use xlink:href="#Layer_x0020_1"/> </g> </glyph> </font> <text id="glyphText"></text> </defs> <g id="pathGroup"> <path id="geometry" fill="none" stroke="blue" stroke-width="1" d="M0 50 L100 0 200 20 150 70 0 50z"/> <text id="testText" font-family="myFont" font-size="20"> <textPath id="glyphTextPath" xlink:href="#geometry"> <tref xlink:href="#glyphText" /> </textPath> </text> </g> </svg> On 2/5/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
Hi Andreas, Andreas Neumann <[EMAIL PROTECTED] > wrote on 02/04/2007 10:10:51 AM: > This is a typical use case for glyphs and textPath. In SVG you can > define you own glyphs (with your own geometry) and then use the textPath > element to align these glyphs along the path element. Duh, I had forgotten about that 'hack'. Thanks for pointing it out. > You can use scripting and the DOM (SVGPathElement.getTotalLength) to > detect the path length and then calculate how many glyphs you need. I > succesfully use this methods for geomorphologic and geologic maps. This > is also a typical procedure in desktop mapping. It occurs to me you could get similar results constructing a polygon and using markers as well. In some cases it might be a little clearer. It might also be easier to space the marks along the lines as well (although dx would work as well). > Opera 9.1 also has the method="stretch" attribute implemented, which can > warp the individual glyphs along the path. However, as far as I know, > Opera 9 is the only SVG viewer that has this feature implemented. But > already without this method, the textPath feature is very useful. > > Here is one textPath example with a self-defined glyph. Its from > Winter/Überschärs book (german) on SVG mapping: > http://www.carto.net/neumann/temp/self_defined_glyphs_on_path.svg > > Andreas > > Amy Comstock wrote: > > > All, > > > > I have a set of third party svg's. They all draw a symbol or are an > > example of a fill pattern. > > > > The svg's are set up like this: > > > > <svg xmlns="http://www.w3.org/2000/svg"; xml:space="preserve" > > width="xxmm" height="xxmm" style="shape-rendering:geometricPrecision; > > text-rendering:geometricPrecision; image-rendering:optimizeQuality; > > fill-rule:evenodd; clip-rule:evenodd" > > viewBox="0 0 xx yy"> > > > > <defs> > > cdata section > > </defs> > > <g id="xx"> > > <g id="yy"> > > <line/path/polyline/etc id="zz" class="abc" coordinate > > list> > > </g> > > there may be multiple subgroups, all with separate id's > > </g> > > </svg> > > > > What I need to do is outline a line/polyline/polygon/path using these > > svg's. > > I tried creating a pattern using the third party svg and then setting > > the pattern as the stroke. The problem is, that doesn't orient the svg > > correctly. > > > > This is what the svg I'm using looks like: > > > > Emacs! > > > > > > When using that svg as the stroke pattern, I end up with this: > > > > Emacs! > > > > > > > > > > > > > > > > What I really want is this, to draw the edges using the pattern: > > Emacs! > > > > > > > > > > Any ideas on how to do this? Is it even possible? > > > > I'm using apache batik to do the drawing in a jsvgcanvas. > > > > > -- > ---------------------------------------------- > Andreas Neumann > Institute of Cartography > ETH Zurich > Wolfgang-Paulistrasse 15 > CH-8093 Zurich, Switzerland > > Phone: ++41-44-633 3031, Fax: ++41-44-633 1153 > e-mail: [EMAIL PROTECTED] > www: http://www.carto.net/neumann/ > SVG.Open: http://www.svgopen.org/ > Carto.net <http://carto.net/>: http://www.carto.net/ > > > --------------------------------------------------------------------- > To unsubscribe, e-mail: [EMAIL PROTECTED] > For additional commands, e-mail: [EMAIL PROTECTED] > --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
glyph_test.svg
Description: image/svg
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
