Hi Amy,
"Amy Comstock" <[EMAIL PROTECTED]> wrote on 02/19/2007 04:12:09 PM:
> 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.
It occurs to me that 'textLength' might be useful in the situation.
This allows you to specify the length the text should cover, this
would allow you to ensure that the glyphs perfectly fit the available
path length.
> 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.
My guess is that we are not picking up the change to the referenced
text. If you do something to the referencing text (like remove and
reappend the text element, or twiddle a text layout attribute) we
should 'notice' the new text and render it properly.
> 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.
I think if you just twiddle something in the referencing element
all will be good. I tried:
var txt = doc.getElementById("testText");
txt.setAttributeNS(null, "font-family",
txt.getAttributeNS(null, "font-family"));
And that worked (if we got smarter it might not but for now
it works).
> 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://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]
> [attachment "glyph_test.svg" deleted by Thomas E. DeWeese/449433/EKC]
> ---------------------------------------------------------------------
> 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]
