/* -*- mode: java; c-basic-offset: 2; indent-tabs-mode: nil -*- */

/*
  Part of the Processing project - http://processing.org

  Copyright (c) 2012-15 The Processing Foundation
  Copyright (c) 2006-12 Ben Fry and Casey Reas
  Copyright (c) 2004-06 Michael Chang

  This library is free software; you can redistribute it and/or
  modify it under the terms of the GNU Lesser General Public
  License version 2.1 as published by the Free Software Foundation.

  This library is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  Lesser General Public License for more details.

  You should have received a copy of the GNU Lesser General
  Public License along with this library; if not, write to the
  Free Software Foundation, Inc., 59 Temple Place, Suite 330,
  Boston, MA  02111-1307  USA
*/

package processing.core;

import processing.data.*;

// TODO replace these with PMatrix2D
import java.awt.geom.AffineTransform;
import java.awt.geom.Point2D;

import java.util.Map;
import java.util.HashMap;


/**
 * This class is not part of the Processing API and should not be used
 * directly. Instead, use loadShape() and methods like it, which will make
 * use of this class. Using this class directly will cause your code to break
 * when combined with future versions of Processing.
 * <p>
 * SVG stands for Scalable Vector Graphics, a portable graphics format.
 * It is a vector format so it allows for "infinite" resolution and relatively
 * small file sizes. Most modern media software can view SVG files, including
 * Adobe products, Firefox, etc. Illustrator and Inkscape can edit SVG files.
 * View the SVG specification <A HREF="http://www.w3.org/TR/SVG">here</A>.
 * <p>
 * We have no intention of turning this into a full-featured SVG library.
 * The goal of this project is a basic shape importer that originally was small
 * enough to be included with applets, meaning that its download size should be
 * in the neighborhood of 25-30 Kb. Though we're far less limited nowadays on
 * size constraints, we remain extremely limited in terms of time, and do not
 * have volunteers who are available to maintain a larger SVG library.
 * <p>
 * For more sophisticated import/export, consider the
 * <A HREF="http://xmlgraphics.apache.org/batik/">Batik</A>
 * library from the Apache Software Foundation.
 * <p>
 * Batik is used in the SVG Export library in Processing 3, however using it
 * for full SVG import is still a considerable amount of work. Wiring it to
 * Java2D wouldn't be too bad, but using it with OpenGL, JavaFX, and features
 * like begin/endRecord() and begin/endRaw() would be considerable effort.
 * <p>
 * Future improvements to this library may focus on this properly supporting
 * a specific subset of SVG, for instance the simpler SVG profiles known as
 * <A HREF="http://www.w3.org/TR/SVGMobile/">SVG Tiny or Basic</A>,
 * although we still would not support the interactivity options.
 *
 * <p> <hr noshade> <p>
 *
 * A minimal example program using SVG:
 * (assuming a working moo.svg is in your data folder)
 *
 * <PRE>
 * PShape moo;
 *
 * void setup() {
 *   size(400, 400);
 *   moo = loadShape("moo.svg");
 * }
 * void draw() {
 *   background(255);
 *   shape(moo, mouseX, mouseY);
 * }
 * </PRE>
 */
public class PShapeSVG extends PShape {
  XML element;

  /// Values between 0 and 1.
  protected float opacity;
  float strokeOpacity;
  float fillOpacity;

  /** Width of containing SVG (used for percentages). */
  protected float svgWidth;

  /** Height of containing SVG (used for percentages). */
  protected float svgHeight;

  /** √((w² + h²)/2) of containing SVG (used for percentages). */
  protected float svgXYSize;

  protected Gradient strokeGradient;
  String strokeName;  // id of another object, gradients only?

  protected Gradient fillGradient;
  String fillName;  // id of another object


  /**
   * Initializes a new SVG object from the given XML object.
   */
  public PShapeSVG(XML svg) {
    this(null, svg, true);

    if (!svg.getName().equals("svg")) {
      if (svg.getName().toLowerCase().equals("html")) {
        // Common case is that files aren't downloaded properly
        throw new RuntimeException("This appears to be a web page, not an SVG file.");
      } else {
        throw new RuntimeException("The root node is not <svg>, it's <" + svg.getName() + ">");
      }
    }
  }


  protected PShapeSVG(PShapeSVG parent, XML properties, boolean parseKids) {
    setParent(parent);

    // Need to get width/height in early.
    if (properties.getName().equals("svg")) {
      String unitWidth = properties.getString("width");
      String unitHeight = properties.getString("height");

      // Can't handle width/height as percentages easily. I'm just going
      // to put in 100 as a dummy value, beacuse this means that it will
      // come out as a reasonable value.
      if (unitWidth  != null) width  = parseUnitSize(unitWidth,  100);
      if (unitHeight != null) height = parseUnitSize(unitHeight, 100);

      String viewBoxStr = properties.getString("viewBox");
      if (viewBoxStr != null) {
        float[] viewBox = PApplet.parseFloat(PApplet.splitTokens(viewBoxStr));
        if (unitWidth == null || unitHeight == null) {
          // Not proper parsing of the viewBox, but will cover us for cases where
          // the width and height of the object is not specified.
          width = viewBox[2];
          height = viewBox[3];
        } else {
          // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
          // TODO: preserveAspectRatio.
          if (matrix == null) matrix = new PMatrix2D();
          matrix.scale(width/viewBox[2], height/viewBox[3]);
          matrix.translate(-viewBox[0], -viewBox[1]);
        }
      }

      // Negative size is illegal.
      if (width < 0 || height < 0)
        throw new RuntimeException("<svg>: width (" + width +
        ") and height (" + height + ") must not be negative.");

      // It's technically valid to have width or height == 0. Not specified at
      // all is what to test for.
      if ((unitWidth == null || unitHeight == null) && viewBoxStr == null) {
        //throw new RuntimeException("width/height not specified");
        PGraphics.showWarning("The width and/or height is not " +
                              "readable in the <svg> tag of this file.");
        // For the spec, the default is 100% and 100%. For purposes
        // here, insert a dummy value because this is prolly just a
        // font or something for which the w/h doesn't matter.
        width = 1;
        height = 1;
      }

      svgWidth = width;
      svgHeight = height;
      svgXYSize = PApplet.sqrt((svgWidth*svgWidth + svgHeight*svgHeight)/2.0f);
    }

    element = properties;
    name = properties.getString("id");
    // @#$(* adobe illustrator mangles names of objects when re-saving
    if (name != null) {
      while (true) {
        String[] m = PApplet.match(name, "_x([A-Za-z0-9]{2})_");
        if (m == null) break;
        char repair = (char) PApplet.unhex(m[1]);
        name = name.replace(m[0], "" + repair);
      }
    }

    String displayStr = properties.getString("display", "inline");
    visible = !displayStr.equals("none");

    String transformStr = properties.getString("transform");
    if (transformStr != null) {
      if (matrix == null) {
        matrix = parseTransform(transformStr);
      } else {
        matrix.preApply(parseTransform(transformStr));
      }
    }

    if (parseKids) {
      parseColors(properties);
      parseChildren(properties);
    }
  }


  // Broken out so that subclasses can copy any additional variables
  // (i.e. fillGradientPaint and strokeGradientPaint)
  protected void setParent(PShapeSVG parent) {
    // Need to set this so that findChild() works.
    // Otherwise 'parent' is null until addChild() is called later.
    this.parent = parent;

    if (parent == null) {
      // set values to their defaults according to the SVG spec
      stroke = false;
      strokeColor = 0xff000000;
      strokeWeight = 1;
      strokeCap = PConstants.SQUARE;  // equivalent to BUTT in svg spec
      strokeJoin = PConstants.MITER;
      strokeGradient = null;
//      strokeGradientPaint = null;
      strokeName = null;

      fill = true;
      fillColor = 0xff000000;
      fillGradient = null;
//      fillGradientPaint = null;
      fillName = null;

      //hasTransform = false;
      //transformation = null; //new float[] { 1, 0, 0, 1, 0, 0 };

      // svgWidth, svgHeight, and svgXYSize done below.

      strokeOpacity = 1;
      fillOpacity = 1;
      opacity = 1;

    } else {
      stroke = parent.stroke;
      strokeColor = parent.strokeColor;
      strokeWeight = parent.strokeWeight;
      strokeCap = parent.strokeCap;
      strokeJoin = parent.strokeJoin;
      strokeGradient = parent.strokeGradient;
//      strokeGradientPaint = parent.strokeGradientPaint;
      strokeName = parent.strokeName;

      fill = parent.fill;
      fillColor = parent.fillColor;
      fillGradient = parent.fillGradient;
//      fillGradientPaint = parent.fillGradientPaint;
      fillName = parent.fillName;

      svgWidth  = parent.svgWidth;
      svgHeight = parent.svgHeight;
      svgXYSize = parent.svgXYSize;

      opacity = parent.opacity;
    }
  }


  /** Factory method for subclasses. */
  protected PShapeSVG createShape(PShapeSVG parent, XML properties, boolean parseKids) {
    return new PShapeSVG(parent, properties, parseKids);
  }


  protected void parseChildren(XML graphics) {
    XML[] elements = graphics.getChildren();
    children = new PShape[elements.length];
    childCount = 0;

    for (XML elem : elements) {
      PShape kid = parseChild(elem);
      if (kid != null) addChild(kid);
    }
    children = (PShape[]) PApplet.subset(children, 0, childCount);
  }


  /**
   * Parse a child XML element.
   * Override this method to add parsing for more SVG elements.
   */
  protected PShape parseChild(XML elem) {
//    System.err.println("parsing child in pshape " + elem.getName());
    String name = elem.getName();
    PShapeSVG shape = null;


    if (name == null) {
      // just some whitespace that can be ignored (hopefully)

    } else if (name.equals("g")) {
      shape = createShape(this, elem, true);

    } else if (name.equals("defs")) {
      // generally this will contain gradient info, so may
      // as well just throw it into a group element for parsing
      shape = createShape(this, elem, true);

    } else if (name.equals("line")) {
      shape = createShape(this, elem, true);
      shape.parseLine();

    } else if (name.equals("circle")) {
      shape = createShape(this, elem, true);
      shape.parseEllipse(true);

    } else if (name.equals("ellipse")) {
      shape = createShape(this, elem, true);
      shape.parseEllipse(false);

    } else if (name.equals("rect")) {
      shape = createShape(this, elem, true);
      shape.parseRect();

    } else if (name.equals("polygon")) {
      shape = createShape(this, elem, true);
      shape.parsePoly(true);

    } else if (name.equals("polyline")) {
      shape = createShape(this, elem, true);
      shape.parsePoly(false);

    } else if (name.equals("path")) {
      shape = createShape(this, elem, true);
      shape.parsePath();

    } else if (name.equals("radialGradient")) {
      return new RadialGradient(this, elem);

    } else if (name.equals("linearGradient")) {
      return new LinearGradient(this, elem);

    } else if (name.equals("font")) {
      return new Font(this, elem);

//    } else if (name.equals("font-face")) {
//      return new FontFace(this, elem);

//    } else if (name.equals("glyph") || name.equals("missing-glyph")) {
//      return new FontGlyph(this, elem);

    } else if (name.equals("text")) {  // || name.equals("font")) {
      PGraphics.showWarning("Text and fonts in SVG files are " +
        "not currently supported, convert text to outlines instead.");

    } else if (name.equals("filter")) {
      PGraphics.showWarning("Filters are not supported.");

    } else if (name.equals("mask")) {
      PGraphics.showWarning("Masks are not supported.");

    } else if (name.equals("pattern")) {
      PGraphics.showWarning("Patterns are not supported.");

    } else if (name.equals("stop")) {
      // stop tag is handled by gradient parser, so don't warn about it

    } else if (name.equals("sodipodi:namedview")) {
      // these are always in Inkscape files, the warnings get tedious

    } else if (name.equals("metadata")
        || name.equals("title") || name.equals("desc")) {
      // fontforge just stuffs <metadata> in as a comment.
      // All harmless stuff, irrelevant to rendering.
      return null;

    } else if (!name.startsWith("#")) {
      PGraphics.showWarning("Ignoring <" + name + "> tag.");
//      new Exception().printStackTrace();
    }
    return shape;
  }


  protected void parseLine() {
    kind = LINE;
    family = PRIMITIVE;
    params = new float[] {
      getFloatWithUnit(element, "x1", svgWidth),
      getFloatWithUnit(element, "y1", svgHeight),
      getFloatWithUnit(element, "x2", svgWidth),
      getFloatWithUnit(element, "y2", svgHeight)
    };
  }


  /**
   * Handles parsing ellipse and circle tags.
   * @param circle true if this is a circle and not an ellipse
   */
  protected void parseEllipse(boolean circle) {
    kind = ELLIPSE;
    family = PRIMITIVE;
    params = new float[4];

    params[0] = getFloatWithUnit(element, "cx", svgWidth);
    params[1] = getFloatWithUnit(element, "cy", svgHeight);

    float rx, ry;
    if (circle) {
      rx = ry = getFloatWithUnit(element, "r", svgXYSize);
    } else {
      rx = getFloatWithUnit(element, "rx", svgWidth);
      ry = getFloatWithUnit(element, "ry", svgHeight);
    }
    params[0] -= rx;
    params[1] -= ry;

    params[2] = rx*2;
    params[3] = ry*2;

  }


  protected void parseRect() {
    kind = RECT;
    family = PRIMITIVE;
    params = new float[] {
      getFloatWithUnit(element, "x", svgWidth),
      getFloatWithUnit(element, "y", svgHeight),
      getFloatWithUnit(element, "width", svgWidth),
      getFloatWithUnit(element, "height", svgHeight)
    };
  }


  /**
   * Parse a polyline or polygon from an SVG file.
   * Syntax defined at http://www.w3.org/TR/SVG/shapes.html#PointsBNF
   * @param close true if shape is closed (polygon), false if not (polyline)
   */
  protected void parsePoly(boolean close) {
    family = PATH;
    this.close = close;

    String pointsAttr = element.getString("points");
    if (pointsAttr != null) {
      String[] pointsBuffer = PApplet.splitTokens(pointsAttr);
      vertexCount = pointsBuffer.length;
      vertices = new float[vertexCount][2];
      for (int i = 0; i < vertexCount; i++) {
        String pb[] = PApplet.splitTokens(pointsBuffer[i], ", \t\r\n");
        vertices[i][X] = Float.parseFloat(pb[0]);
        vertices[i][Y] = Float.parseFloat(pb[1]);
      }
    }
  }


  protected void parsePath() {
    family = PATH;
    kind = 0;

    String pathData = element.getString("d");
    if (pathData == null || PApplet.trim(pathData).length() == 0) {
      return;
    }
    char[] pathDataChars = pathData.toCharArray();

    StringBuilder pathBuffer = new StringBuilder();
    boolean lastSeparate = false;

    for (int i = 0; i < pathDataChars.length; i++) {
      char c = pathDataChars[i];
      boolean separate = false;

      if (c == 'M' || c == 'm' ||
          c == 'L' || c == 'l' ||
          c == 'H' || c == 'h' ||
          c == 'V' || c == 'v' ||
          c == 'C' || c == 'c' ||  // beziers
          c == 'S' || c == 's' ||
          c == 'Q' || c == 'q' ||  // quadratic beziers
          c == 'T' || c == 't' ||
          c == 'A' || c == 'a' ||  // elliptical arc
          c == 'Z' || c == 'z' ||  // closepath
          c == ',') {
        separate = true;
        if (i != 0) {
          pathBuffer.append("|");
        }
      }
      if (c == 'Z' || c == 'z') {
        separate = false;
      }
      if (c == '-' && !lastSeparate) {
        // allow for 'e' notation in numbers, e.g. 2.10e-9
        // http://dev.processing.org/bugs/show_bug.cgi?id=1408
        if (i == 0 || pathDataChars[i-1] != 'e') {
          pathBuffer.append("|");
        }
      }
      if (c != ',') {
        pathBuffer.append(c); //"" + pathDataBuffer.charAt(i));
      }
      if (separate && c != ',' && c != '-') {
        pathBuffer.append("|");
      }
      lastSeparate = separate;
    }

    // use whitespace constant to get rid of extra spaces and CR or LF
    String[] pathTokens =
      PApplet.splitTokens(pathBuffer.toString(), "|" + WHITESPACE);
    vertices = new float[pathTokens.length][2];
    vertexCodes = new int[pathTokens.length];

    float cx = 0;
    float cy = 0;
    int i = 0;

    char implicitCommand = '\0';
//    char prevCommand = '\0';
    boolean prevCurve = false;
    float ctrlX, ctrlY;
    // store values for closepath so that relative coords work properly
    float movetoX = 0;
    float movetoY = 0;

    while (i < pathTokens.length) {
      char c = pathTokens[i].charAt(0);
      if (((c >= '0' && c <= '9') || (c == '-')) && implicitCommand != '\0') {
        c = implicitCommand;
        i--;
      } else {
        implicitCommand = c;
      }
      switch (c) {

      case 'M':  // M - move to (absolute)
        cx = PApplet.parseFloat(pathTokens[i + 1]);
        cy = PApplet.parseFloat(pathTokens[i + 2]);
        movetoX = cx;
        movetoY = cy;
        parsePathMoveto(cx, cy);
        implicitCommand = 'L';
        i += 3;
        break;

      case 'm':  // m - move to (relative)
        cx = cx + PApplet.parseFloat(pathTokens[i + 1]);
        cy = cy + PApplet.parseFloat(pathTokens[i + 2]);
        movetoX = cx;
        movetoY = cy;
        parsePathMoveto(cx, cy);
        implicitCommand = 'l';
        i += 3;
        break;

      case 'L':
        cx = PApplet.parseFloat(pathTokens[i + 1]);
        cy = PApplet.parseFloat(pathTokens[i + 2]);
        parsePathLineto(cx, cy);
        i += 3;
        break;

      case 'l':
        cx = cx + PApplet.parseFloat(pathTokens[i + 1]);
        cy = cy + PApplet.parseFloat(pathTokens[i + 2]);
        parsePathLineto(cx, cy);
        i += 3;
        break;

        // horizontal lineto absolute
      case 'H':
        cx = PApplet.parseFloat(pathTokens[i + 1]);
        parsePathLineto(cx, cy);
        i += 2;
        break;

        // horizontal lineto relative
      case 'h':
        cx = cx + PApplet.parseFloat(pathTokens[i + 1]);
        parsePathLineto(cx, cy);
        i += 2;
        break;

      case 'V':
        cy = PApplet.parseFloat(pathTokens[i + 1]);
        parsePathLineto(cx, cy);
        i += 2;
        break;

      case 'v':
        cy = cy + PApplet.parseFloat(pathTokens[i + 1]);
        parsePathLineto(cx, cy);
        i += 2;
        break;

        // C - curve to (absolute)
      case 'C': {
        float ctrlX1 = PApplet.parseFloat(pathTokens[i + 1]);
        float ctrlY1 = PApplet.parseFloat(pathTokens[i + 2]);
        float ctrlX2 = PApplet.parseFloat(pathTokens[i + 3]);
        float ctrlY2 = PApplet.parseFloat(pathTokens[i + 4]);
        float endX = PApplet.parseFloat(pathTokens[i + 5]);
        float endY = PApplet.parseFloat(pathTokens[i + 6]);
        parsePathCurveto(ctrlX1, ctrlY1, ctrlX2, ctrlY2, endX, endY);
        cx = endX;
        cy = endY;
        i += 7;
        prevCurve = true;
      }
      break;

        // c - curve to (relative)
      case 'c': {
        float ctrlX1 = cx + PApplet.parseFloat(pathTokens[i + 1]);
        float ctrlY1 = cy + PApplet.parseFloat(pathTokens[i + 2]);
        float ctrlX2 = cx + PApplet.parseFloat(pathTokens[i + 3]);
        float ctrlY2 = cy + PApplet.parseFloat(pathTokens[i + 4]);
        float endX = cx + PApplet.parseFloat(pathTokens[i + 5]);
        float endY = cy + PApplet.parseFloat(pathTokens[i + 6]);
        parsePathCurveto(ctrlX1, ctrlY1, ctrlX2, ctrlY2, endX, endY);
        cx = endX;
        cy = endY;
        i += 7;
        prevCurve = true;
      }
      break;

      // S - curve to shorthand (absolute)
      // Draws a cubic Bézier curve from the current point to (x,y). The first
      // control point is assumed to be the reflection of the second control
      // point on the previous command relative to the current point.
      // (x2,y2) is the second control point (i.e., the control point
      // at the end of the curve). S (uppercase) indicates that absolute
      // coordinates will follow; s (lowercase) indicates that relative
      // coordinates will follow. Multiple sets of coordinates may be specified
      // to draw a polybézier. At the end of the command, the new current point
      // becomes the final (x,y) coordinate pair used in the polybézier.
      case 'S': {
        // (If there is no previous command or if the previous command was not
        // an C, c, S or s, assume the first control point is coincident with
        // the current point.)
        if (!prevCurve) {
          ctrlX = cx;
          ctrlY = cy;
        } else {
          float ppx = vertices[vertexCount-2][X];
          float ppy = vertices[vertexCount-2][Y];
          float px = vertices[vertexCount-1][X];
          float py = vertices[vertexCount-1][Y];
          ctrlX = px + (px - ppx);
          ctrlY = py + (py - ppy);
        }
        float ctrlX2 = PApplet.parseFloat(pathTokens[i + 1]);
        float ctrlY2 = PApplet.parseFloat(pathTokens[i + 2]);
        float endX = PApplet.parseFloat(pathTokens[i + 3]);
        float endY = PApplet.parseFloat(pathTokens[i + 4]);
        parsePathCurveto(ctrlX, ctrlY, ctrlX2, ctrlY2, endX, endY);
        cx = endX;
        cy = endY;
        i += 5;
        prevCurve = true;
      }
      break;

        // s - curve to shorthand (relative)
      case 's': {
        if (!prevCurve) {
          ctrlX = cx;
          ctrlY = cy;
        } else {
          float ppx = vertices[vertexCount-2][X];
          float ppy = vertices[vertexCount-2][Y];
          float px = vertices[vertexCount-1][X];
          float py = vertices[vertexCount-1][Y];
          ctrlX = px + (px - ppx);
          ctrlY = py + (py - ppy);
        }
        float ctrlX2 = cx + PApplet.parseFloat(pathTokens[i + 1]);
        float ctrlY2 = cy + PApplet.parseFloat(pathTokens[i + 2]);
        float endX = cx + PApplet.parseFloat(pathTokens[i + 3]);
        float endY = cy + PApplet.parseFloat(pathTokens[i + 4]);
        parsePathCurveto(ctrlX, ctrlY, ctrlX2, ctrlY2, endX, endY);
        cx = endX;
        cy = endY;
        i += 5;
        prevCurve = true;
      }
      break;

      // Q - quadratic curve to (absolute)
      // Draws a quadratic Bézier curve from the current point to (x,y) using
      // (x1,y1) as the control point. Q (uppercase) indicates that absolute
      // coordinates will follow; q (lowercase) indicates that relative
      // coordinates will follow. Multiple sets of coordinates may be specified
      // to draw a polybézier. At the end of the command, the new current point
      // becomes the final (x,y) coordinate pair used in the polybézier.
      case 'Q': {
        ctrlX = PApplet.parseFloat(pathTokens[i + 1]);
        ctrlY = PApplet.parseFloat(pathTokens[i + 2]);
        float endX = PApplet.parseFloat(pathTokens[i + 3]);
        float endY = PApplet.parseFloat(pathTokens[i + 4]);
        //parsePathQuadto(cx, cy, ctrlX, ctrlY, endX, endY);
        parsePathQuadto(ctrlX, ctrlY, endX, endY);
        cx = endX;
        cy = endY;
        i += 5;
        prevCurve = true;
      }
      break;

      // q - quadratic curve to (relative)
      case 'q': {
        ctrlX = cx + PApplet.parseFloat(pathTokens[i + 1]);
        ctrlY = cy + PApplet.parseFloat(pathTokens[i + 2]);
        float endX = cx + PApplet.parseFloat(pathTokens[i + 3]);
        float endY = cy + PApplet.parseFloat(pathTokens[i + 4]);
        //parsePathQuadto(cx, cy, ctrlX, ctrlY, endX, endY);
        parsePathQuadto(ctrlX, ctrlY, endX, endY);
        cx = endX;
        cy = endY;
        i += 5;
        prevCurve = true;
      }
      break;

      // T - quadratic curveto shorthand (absolute)
      // The control point is assumed to be the reflection of the control
      // point on the previous command relative to the current point.
      case 'T': {
        // If there is no previous command or if the previous command was
        // not a Q, q, T or t, assume the control point is coincident
        // with the current point.
        if (!prevCurve) {
          ctrlX = cx;
          ctrlY = cy;
        } else {
          float ppx = vertices[vertexCount-2][X];
          float ppy = vertices[vertexCount-2][Y];
          float px = vertices[vertexCount-1][X];
          float py = vertices[vertexCount-1][Y];
          ctrlX = px + (px - ppx);
          ctrlY = py + (py - ppy);
        }
        float endX = PApplet.parseFloat(pathTokens[i + 1]);
        float endY = PApplet.parseFloat(pathTokens[i + 2]);
        //parsePathQuadto(cx, cy, ctrlX, ctrlY, endX, endY);
        parsePathQuadto(ctrlX, ctrlY, endX, endY);
        cx = endX;
        cy = endY;
        i += 3;
        prevCurve = true;
      }
        break;

        // t - quadratic curveto shorthand (relative)
      case 't': {
        if (!prevCurve) {
          ctrlX = cx;
          ctrlY = cy;
        } else {
          float ppx = vertices[vertexCount-2][X];
          float ppy = vertices[vertexCount-2][Y];
          float px = vertices[vertexCount-1][X];
          float py = vertices[vertexCount-1][Y];
          ctrlX = px + (px - ppx);
          ctrlY = py + (py - ppy);
        }
        float endX = cx + PApplet.parseFloat(pathTokens[i + 1]);
        float endY = cy + PApplet.parseFloat(pathTokens[i + 2]);
        //parsePathQuadto(cx, cy, ctrlX, ctrlY, endX, endY);
        parsePathQuadto(ctrlX, ctrlY, endX, endY);
        cx = endX;
        cy = endY;
        i += 3;
        prevCurve = true;
      }
        break;

      // A - elliptical arc to (absolute)
      case 'A': {
        float rx = PApplet.parseFloat(pathTokens[i + 1]);
        float ry = PApplet.parseFloat(pathTokens[i + 2]);
        float angle = PApplet.parseFloat(pathTokens[i + 3]);
        boolean fa = PApplet.parseFloat(pathTokens[i + 4]) != 0;
        boolean fs = PApplet.parseFloat(pathTokens[i + 5]) != 0;
        float endX = PApplet.parseFloat(pathTokens[i + 6]);
        float endY = PApplet.parseFloat(pathTokens[i + 7]);
        parsePathArcto(cx, cy, rx, ry, angle, fa, fs, endX, endY);
        cx = endX;
        cy = endY;
        i += 8;
        prevCurve = true;
      }
      break;

      // a - elliptical arc to (relative)
      case 'a': {
        float rx = PApplet.parseFloat(pathTokens[i + 1]);
        float ry = PApplet.parseFloat(pathTokens[i + 2]);
        float angle = PApplet.parseFloat(pathTokens[i + 3]);
        boolean fa = PApplet.parseFloat(pathTokens[i + 4]) != 0;
        boolean fs = PApplet.parseFloat(pathTokens[i + 5]) != 0;
        float endX = cx + PApplet.parseFloat(pathTokens[i + 6]);
        float endY = cy + PApplet.parseFloat(pathTokens[i + 7]);
        parsePathArcto(cx, cy, rx, ry, angle, fa, fs, endX, endY);
        cx = endX;
        cy = endY;
        i += 8;
        prevCurve = true;
      }
      break;

      case 'Z':
      case 'z':
        // since closing the path, the 'current' point needs
        // to return back to the last moveto location.
        // http://code.google.com/p/processing/issues/detail?id=1058
        cx = movetoX;
        cy = movetoY;
        close = true;
        i++;
        break;

      default:
        String parsed =
          PApplet.join(PApplet.subset(pathTokens, 0, i), ",");
        String unparsed =
          PApplet.join(PApplet.subset(pathTokens, i), ",");
        System.err.println("parsed: " + parsed);
        System.err.println("unparsed: " + unparsed);
        throw new RuntimeException("shape command not handled: " + pathTokens[i]);
      }
//      prevCommand = c;
    }
  }


//      private void parsePathCheck(int num) {
//        if (vertexCount + num-1 >= vertices.length) {
//          //vertices = (float[][]) PApplet.expand(vertices);
//          float[][] temp = new float[vertexCount << 1][2];
//          System.arraycopy(vertices, 0, temp, 0, vertexCount);
//          vertices = temp;
//        }
//      }

  private void parsePathVertex(float x, float y) {
    if (vertexCount == vertices.length) {
      //vertices = (float[][]) PApplet.expand(vertices);
      float[][] temp = new float[vertexCount << 1][2];
      System.arraycopy(vertices, 0, temp, 0, vertexCount);
      vertices = temp;
    }
    vertices[vertexCount][X] = x;
    vertices[vertexCount][Y] = y;
    vertexCount++;
  }


  private void parsePathCode(int what) {
    if (vertexCodeCount == vertexCodes.length) {
      vertexCodes = PApplet.expand(vertexCodes);
    }
    vertexCodes[vertexCodeCount++] = what;
  }


  private void parsePathMoveto(float px, float py) {
    if (vertexCount > 0) {
      parsePathCode(BREAK);
    }
    parsePathCode(VERTEX);
    parsePathVertex(px, py);
  }


  private void parsePathLineto(float px, float py) {
    parsePathCode(VERTEX);
    parsePathVertex(px, py);
  }


  private void parsePathCurveto(float x1, float y1,
                                float x2, float y2,
                                float x3, float y3) {
    parsePathCode(BEZIER_VERTEX);
    parsePathVertex(x1, y1);
    parsePathVertex(x2, y2);
    parsePathVertex(x3, y3);
  }

//  private void parsePathQuadto(float x1, float y1,
//                               float cx, float cy,
//                               float x2, float y2) {
//    //System.out.println("quadto: " + x1 + "," + y1 + " " + cx + "," + cy + " " + x2 + "," + y2);
////    parsePathCode(BEZIER_VERTEX);
//    parsePathCode(QUAD_BEZIER_VERTEX);
//    // x1/y1 already covered by last moveto, lineto, or curveto
//
//    parsePathVertex(x1 + ((cx-x1)*2/3.0f), y1 + ((cy-y1)*2/3.0f));
//    parsePathVertex(x2 + ((cx-x2)*2/3.0f), y2 + ((cy-y2)*2/3.0f));
//    parsePathVertex(x2, y2);
//  }

  private void parsePathQuadto(float cx, float cy,
                               float x2, float y2) {
    //System.out.println("quadto: " + x1 + "," + y1 + " " + cx + "," + cy + " " + x2 + "," + y2);
//    parsePathCode(BEZIER_VERTEX);
    parsePathCode(QUADRATIC_VERTEX);
    // x1/y1 already covered by last moveto, lineto, or curveto
    parsePathVertex(cx, cy);
    parsePathVertex(x2, y2);
  }


  // Approximates elliptical arc by several bezier segments.
  // Meets SVG standard requirements from:
  //   http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
  //   http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
  // Based on arc to bezier curve equations from:
  //   http://www.spaceroots.org/documents/ellipse/node22.html
  private void parsePathArcto(float x1,    float y1,
                              float rx,    float ry,
                              float angle,
                              boolean fa,  boolean fs,
                              float x2,    float y2) {
    if (x1 == x2 && y1 == y2) return;
    if (rx == 0 || ry == 0) { parsePathLineto(x2, y2);  return; }

    rx = PApplet.abs(rx);  ry = PApplet.abs(ry);

    float phi = PApplet.radians(((angle % 360) + 360) % 360);
    float cosPhi = PApplet.cos(phi),  sinPhi = PApplet.sin(phi);

    float x1r = ( cosPhi * (x1 - x2) + sinPhi * (y1 - y2)) / 2;
    float y1r = (-sinPhi * (x1 - x2) + cosPhi * (y1 - y2)) / 2;

    float cxr, cyr;
    {
      float A = (x1r*x1r) / (rx*rx) + (y1r*y1r) / (ry*ry);
      if (A > 1) {
        // No solution, scale ellipse up according to SVG standard
        float sqrtA = PApplet.sqrt(A);
        rx *= sqrtA;  cxr = 0;
        ry *= sqrtA;  cyr = 0;
      } else {
        float k = ((fa == fs) ? -1f : 1f) *
          PApplet.sqrt((rx*rx * ry*ry) / ((rx*rx * y1r*y1r) + (ry*ry * x1r*x1r)) - 1f);
        cxr =  k * rx * y1r / ry;
        cyr = -k * ry * x1r / rx;
      }
    }

    float cx = cosPhi * cxr - sinPhi * cyr + (x1 + x2) / 2;
    float cy = sinPhi * cxr + cosPhi * cyr + (y1 + y2) / 2;

    float phi1, phiDelta;
    {
      float sx = ( x1r - cxr) / rx,  sy = ( y1r - cyr) / ry;
      float tx = (-x1r - cxr) / rx,  ty = (-y1r - cyr) / ry;
      phi1 = PApplet.atan2(sy, sx);
      phiDelta = (((PApplet.atan2(ty, tx) - phi1) % TWO_PI) + TWO_PI) % TWO_PI;
      if (!fs) phiDelta -= TWO_PI;
    }

    // One segment can not cover more that PI, less than PI/2 is
    // recommended to avoid visible inaccuracies caused by rounding errors
    int segmentCount = PApplet.ceil(PApplet.abs(phiDelta) / TWO_PI * 4);

    float inc = phiDelta / segmentCount;
    float a = PApplet.sin(inc) *
      (PApplet.sqrt(4 + 3 * PApplet.sq(PApplet.tan(inc / 2))) - 1) / 3;

    float sinPhi1 = PApplet.sin(phi1),  cosPhi1 = PApplet.cos(phi1);

    float p1x = x1;
    float p1y = y1;
    float relq1x = a * (-rx * cosPhi * sinPhi1 - ry * sinPhi * cosPhi1);
    float relq1y = a * (-rx * sinPhi * sinPhi1 + ry * cosPhi * cosPhi1);

    for (int i = 0; i < segmentCount; i++) {
      float eta = phi1 + (i + 1) * inc;
      float sinEta = PApplet.sin(eta),  cosEta = PApplet.cos(eta);

      float p2x = cx + rx * cosPhi * cosEta - ry * sinPhi * sinEta;
      float p2y = cy + rx * sinPhi * cosEta + ry * cosPhi * sinEta;
      float relq2x = a * (-rx * cosPhi * sinEta - ry * sinPhi * cosEta);
      float relq2y = a * (-rx * sinPhi * sinEta + ry * cosPhi * cosEta);

      if (i == segmentCount - 1) { p2x = x2;  p2y = y2; }

      parsePathCode(BEZIER_VERTEX);
      parsePathVertex(p1x + relq1x, p1y + relq1y);
      parsePathVertex(p2x - relq2x, p2y - relq2y);
      parsePathVertex(p2x, p2y);

      p1x = p2x;  relq1x = relq2x;
      p1y = p2y;  relq1y = relq2y;
    }
  }


  /**
   * Parse the specified SVG matrix into a PMatrix2D. Note that PMatrix2D
   * is rotated relative to the SVG definition, so parameters are rearranged
   * here. More about the transformation matrices in
   * <a href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">this section</a>
   * of the SVG documentation.
   * @param matrixStr text of the matrix param.
   * @return a good old-fashioned PMatrix2D
   */
  static protected PMatrix2D parseTransform(String matrixStr) {
    matrixStr = matrixStr.trim();
    PMatrix2D outgoing = null;
    int start = 0;
    int stop = -1;
    while ((stop = matrixStr.indexOf(')', start)) != -1) {
      PMatrix2D m = parseSingleTransform(matrixStr.substring(start, stop+1));
      if (outgoing == null) {
        outgoing = m;
      } else {
        outgoing.apply(m);
      }
      start = stop + 1;
    }
    return outgoing;
  }


  static protected PMatrix2D parseSingleTransform(String matrixStr) {
    //String[] pieces = PApplet.match(matrixStr, "^\\s*(\\w+)\\((.*)\\)\\s*$");
    String[] pieces = PApplet.match(matrixStr, "[,\\s]*(\\w+)\\((.*)\\)");
    if (pieces == null) {
      System.err.println("Could not parse transform " + matrixStr);
      return null;
    }
    float[] m = PApplet.parseFloat(PApplet.splitTokens(pieces[2], ", "));
    if (pieces[1].equals("matrix")) {
      return new PMatrix2D(m[0], m[2], m[4], m[1], m[3], m[5]);

    } else if (pieces[1].equals("translate")) {
      float tx = m[0];
      float ty = (m.length == 2) ? m[1] : m[0];
      return new PMatrix2D(1, 0, tx, 0, 1, ty);

    } else if (pieces[1].equals("scale")) {
      float sx = m[0];
      float sy = (m.length == 2) ? m[1] : m[0];
      return new PMatrix2D(sx, 0, 0,  0, sy, 0);

    } else if (pieces[1].equals("rotate")) {
      float angle = m[0];

      if (m.length == 1) {
        float c = PApplet.cos(angle);
        float s = PApplet.sin(angle);
        // SVG version is cos(a) sin(a) -sin(a) cos(a) 0 0
        return new PMatrix2D(c, -s, 0, s, c, 0);

      } else if (m.length == 3) {
        PMatrix2D mat = new PMatrix2D(0, 1, m[1],  1, 0, m[2]);
        mat.rotate(m[0]);
        mat.translate(-m[1], -m[2]);
        return mat;
      }

    } else if (pieces[1].equals("skewX")) {
      return new PMatrix2D(1, 0, 1,  PApplet.tan(m[0]), 0, 0);

    } else if (pieces[1].equals("skewY")) {
      return new PMatrix2D(1, 0, 1,  0, PApplet.tan(m[0]), 0);
    }
    return null;
  }


  protected void parseColors(XML properties) {
    if (properties.hasAttribute("opacity")) {
      String opacityText = properties.getString("opacity");
      setOpacity(opacityText);
    }

    if (properties.hasAttribute("stroke")) {
      String strokeText = properties.getString("stroke");
      setColor(strokeText, false);
    }

    if (properties.hasAttribute("stroke-opacity")) {
      String strokeOpacityText = properties.getString("stroke-opacity");
      setStrokeOpacity(strokeOpacityText);
    }

    if (properties.hasAttribute("stroke-width")) {
      // if NaN (i.e. if it's 'inherit') then default back to the inherit setting
      String lineweight = properties.getString("stroke-width");
      setStrokeWeight(lineweight);
    }

    if (properties.hasAttribute("stroke-linejoin")) {
      String linejoin = properties.getString("stroke-linejoin");
      setStrokeJoin(linejoin);
    }

    if (properties.hasAttribute("stroke-linecap")) {
      String linecap = properties.getString("stroke-linecap");
      setStrokeCap(linecap);
    }

    // fill defaults to black (though stroke defaults to "none")
    // http://www.w3.org/TR/SVG/painting.html#FillProperties
    if (properties.hasAttribute("fill")) {
      String fillText = properties.getString("fill");
      setColor(fillText, true);
    }

    if (properties.hasAttribute("fill-opacity")) {
      String fillOpacityText = properties.getString("fill-opacity");
      setFillOpacity(fillOpacityText);
    }

    if (properties.hasAttribute("style")) {
      String styleText = properties.getString("style");
      String[] styleTokens = PApplet.splitTokens(styleText, ";");

      //PApplet.println(styleTokens);
      for (int i = 0; i < styleTokens.length; i++) {
        String[] tokens = PApplet.splitTokens(styleTokens[i], ":");
        //PApplet.println(tokens);

        tokens[0] = PApplet.trim(tokens[0]);

        if (tokens[0].equals("fill")) {
          setColor(tokens[1], true);

        } else if(tokens[0].equals("fill-opacity")) {
          setFillOpacity(tokens[1]);

        } else if(tokens[0].equals("stroke")) {
          setColor(tokens[1], false);

        } else if(tokens[0].equals("stroke-width")) {
          setStrokeWeight(tokens[1]);

        } else if(tokens[0].equals("stroke-linecap")) {
          setStrokeCap(tokens[1]);

        } else if(tokens[0].equals("stroke-linejoin")) {
          setStrokeJoin(tokens[1]);

        } else if(tokens[0].equals("stroke-opacity")) {
          setStrokeOpacity(tokens[1]);

        } else if(tokens[0].equals("opacity")) {
          setOpacity(tokens[1]);

        } else {
          // Other attributes are not yet implemented
        }
      }
    }
  }


  void setOpacity(String opacityText) {
    opacity = PApplet.parseFloat(opacityText);
    strokeColor = ((int) (opacity * 255)) << 24 | strokeColor & 0xFFFFFF;
    fillColor = ((int) (opacity * 255)) << 24 | fillColor & 0xFFFFFF;
  }


  void setStrokeWeight(String lineweight) {
    strokeWeight = parseUnitSize(lineweight, svgXYSize);
  }


  void setStrokeOpacity(String opacityText) {
    strokeOpacity = PApplet.parseFloat(opacityText);
    strokeColor = ((int) (strokeOpacity * 255)) << 24 | strokeColor & 0xFFFFFF;
  }


  void setStrokeJoin(String linejoin) {
    if (linejoin.equals("inherit")) {
      // do nothing, will inherit automatically

    } else if (linejoin.equals("miter")) {
      strokeJoin = PConstants.MITER;

    } else if (linejoin.equals("round")) {
      strokeJoin = PConstants.ROUND;

    } else if (linejoin.equals("bevel")) {
      strokeJoin = PConstants.BEVEL;
    }
  }


  void setStrokeCap(String linecap) {
    if (linecap.equals("inherit")) {
      // do nothing, will inherit automatically

    } else if (linecap.equals("butt")) {
      strokeCap = PConstants.SQUARE;

    } else if (linecap.equals("round")) {
      strokeCap = PConstants.ROUND;

    } else if (linecap.equals("square")) {
      strokeCap = PConstants.PROJECT;
    }
  }


  void setFillOpacity(String opacityText) {
    fillOpacity = PApplet.parseFloat(opacityText);
    fillColor = ((int) (fillOpacity * 255)) << 24 | fillColor & 0xFFFFFF;
  }


  void setColor(String colorText, boolean isFill) {
    colorText = colorText.trim();
    int opacityMask = fillColor & 0xFF000000;
    boolean visible = true;
    int color = 0;
    String name = "";
//    String lColorText = colorText.toLowerCase();
    Gradient gradient = null;
//    Object paint = null;
    if (colorText.equals("none")) {
      visible = false;
    } else if (colorText.startsWith("url(#")) {
      name = colorText.substring(5, colorText.length() - 1);
      Object object = findChild(name);
      if (object instanceof Gradient) {
        gradient = (Gradient) object;
        // in 3.0a11, do this on first draw inside PShapeJava2D
//        paint = calcGradientPaint(gradient); //, opacity);
      } else {
//        visible = false;
        System.err.println("url " + name + " refers to unexpected data: " + object);
      }
    } else {
      // Prints errors itself.
      color = opacityMask | parseSimpleColor(colorText);
    }
    if (isFill) {
      fill = visible;
      fillColor = color;
      fillName = name;
      fillGradient = gradient;
//      fillGradientPaint = paint;
    } else {
      stroke = visible;
      strokeColor = color;
      strokeName = name;
      strokeGradient = gradient;
//      strokeGradientPaint = paint;
    }
  }


  /**
   * Parses the "color" datatype only, and prints an error if it is not of this form.
   * http://www.w3.org/TR/SVG/types.html#DataTypeColor
   * @return 0xRRGGBB (no alpha). Zero on error.
   */
  static protected int parseSimpleColor(String colorText) {
    colorText = colorText.toLowerCase().trim();
    //if (colorNames.containsKey(colorText)) {
    if (colorNames.hasKey(colorText)) {
      return colorNames.get(colorText);
    } else if (colorText.startsWith("#")) {
      if (colorText.length() == 4) {
        // Short form: #ABC, transform to long form #AABBCC
        colorText = colorText.replaceAll("^#(.)(.)(.)$", "#$1$1$2$2$3$3");
      }
      return (Integer.parseInt(colorText.substring(1), 16)) & 0xFFFFFF;
      //System.out.println("hex for fill is " + PApplet.hex(fillColor));
    } else if (colorText.startsWith("rgb")) {
      return parseRGB(colorText);
    } else {
      System.err.println("Cannot parse \"" + colorText + "\".");
      return 0;
    }
  }


  /**
   * Deliberately conforms to the HTML 4.01 color spec + en-gb grey, rather
   * than the (unlikely to be useful) entire 147-color system used in SVG.
   */
  static protected IntDict colorNames = new IntDict(new Object[][] {
    { "aqua",    0x00ffff },
    { "black",   0x000000 },
    { "blue",    0x0000ff },
    { "fuchsia", 0xff00ff },
    { "gray",    0x808080 },
    { "grey",    0x808080 },
    { "green",   0x008000 },
    { "lime",    0x00ff00 },
    { "maroon",  0x800000 },
    { "navy",    0x000080 },
    { "olive",   0x808000 },
    { "purple",  0x800080 },
    { "red",     0xff0000 },
    { "silver",  0xc0c0c0 },
    { "teal",    0x008080 },
    { "white",   0xffffff },
    { "yellow",  0xffff00 }
  });

  /*
  static protected Map<String, Integer> colorNames;
  static {
    colorNames = new HashMap<String, Integer>();
    colorNames.put("aqua",    0x00ffff);
    colorNames.put("black",   0x000000);
    colorNames.put("blue",    0x0000ff);
    colorNames.put("fuchsia", 0xff00ff);
    colorNames.put("gray",    0x808080);
    colorNames.put("grey",    0x808080);
    colorNames.put("green",   0x008000);
    colorNames.put("lime",    0x00ff00);
    colorNames.put("maroon",  0x800000);
    colorNames.put("navy",    0x000080);
    colorNames.put("olive",   0x808000);
    colorNames.put("purple",  0x800080);
    colorNames.put("red",     0xff0000);
    colorNames.put("silver",  0xc0c0c0);
    colorNames.put("teal",    0x008080);
    colorNames.put("white",   0xffffff);
    colorNames.put("yellow",  0xffff00);
  }
  */

  static protected int parseRGB(String what) {
    int leftParen = what.indexOf('(') + 1;
    int rightParen = what.indexOf(')');
    String sub = what.substring(leftParen, rightParen);
    String[] values = PApplet.splitTokens(sub, ", ");
    int rgbValue = 0;
    if (values.length == 3) {
      // Color spec allows for rgb values to be percentages.
      for (int i = 0; i < 3; i++) {
        rgbValue <<= 8;
        if (values[i].endsWith("%")) {
          rgbValue |= (int)(PApplet.constrain(255*parseFloatOrPercent(values[i]), 0, 255));
        } else {
          rgbValue |= PApplet.constrain(PApplet.parseInt(values[i]), 0, 255);
        }
      }
    } else System.err.println("Could not read color \"" + what + "\".");

    return rgbValue;
  }


  //static protected Map<String, String> parseStyleAttributes(String style) {
  static protected StringDict parseStyleAttributes(String style) {
    //Map<String, String> table = new HashMap<String, String>();
    StringDict table = new StringDict();
//    if (style == null) return table;
    if (style != null) {
      String[] pieces = style.split(";");
      for (int i = 0; i < pieces.length; i++) {
        String[] parts = pieces[i].split(":");
        //table.put(parts[0], parts[1]);
        table.set(parts[0], parts[1]);
      }
    }
    return table;
  }


  /**
   * Used in place of element.getFloatAttribute(a) because we can
   * have a unit suffix (length or coordinate).
   * @param element what to parse
   * @param attribute name of the attribute to get
   * @param relativeTo (float) Used for %. When relative to viewbox, should
   *    be svgWidth for horizontal dimentions, svgHeight for vertical, and
   *    svgXYSize for anything else.
   * @return unit-parsed version of the data
   */
  static protected float getFloatWithUnit(XML element, String attribute, float relativeTo) {
    String val = element.getString(attribute);
    return (val == null) ? 0 : parseUnitSize(val, relativeTo);
  }


  /**
   * Parse a size that may have a suffix for its units.
   * This assumes 90dpi, which implies, as given in the
   * <A HREF="http://www.w3.org/TR/SVG/coords.html#Units">units</A> spec:
   * <UL>
   * <LI>"1pt" equals "1.25px" (and therefore 1.25 user units)
   * <LI>"1pc" equals "15px" (and therefore 15 user units)
   * <LI>"1mm" would be "3.543307px" (3.543307 user units)
   * <LI>"1cm" equals "35.43307px" (and therefore 35.43307 user units)
   * <LI>"1in" equals "90px" (and therefore 90 user units)
   * </UL>
   * @param relativeTo (float) Used for %. When relative to viewbox, should
   *    be svgWidth for horizontal dimentions, svgHeight for vertical, and
   *    svgXYSize for anything else.
   */
  static protected float parseUnitSize(String text, float relativeTo) {
    int len = text.length() - 2;

    if (text.endsWith("pt")) {
      return PApplet.parseFloat(text.substring(0, len)) * 1.25f;
    } else if (text.endsWith("pc")) {
      return PApplet.parseFloat(text.substring(0, len)) * 15;
    } else if (text.endsWith("mm")) {
      return PApplet.parseFloat(text.substring(0, len)) * 3.543307f;
    } else if (text.endsWith("cm")) {
      return PApplet.parseFloat(text.substring(0, len)) * 35.43307f;
    } else if (text.endsWith("in")) {
      return PApplet.parseFloat(text.substring(0, len)) * 90;
    } else if (text.endsWith("px")) {
      return PApplet.parseFloat(text.substring(0, len));
    } else if (text.endsWith("%")) {
      return relativeTo * parseFloatOrPercent(text);
    } else {
      return PApplet.parseFloat(text);
    }
  }


  static protected float parseFloatOrPercent(String text) {
    text = text.trim();
    if (text.endsWith("%")) {
      return Float.parseFloat(text.substring(0, text.length() - 1)) / 100.0f;
    } else {
      return Float.parseFloat(text);
    }
  }


  // . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


  static public class Gradient extends PShapeSVG {
    AffineTransform transform;

    public float[] offset;
    public int[] color;
    public int count;

    public Gradient(PShapeSVG parent, XML properties) {
      super(parent, properties, true);

      XML elements[] = properties.getChildren();
      offset = new float[elements.length];
      color = new int[elements.length];

      // <stop  offset="0" style="stop-color:#967348"/>
      for (int i = 0; i < elements.length; i++) {
        XML elem = elements[i];
        String name = elem.getName();
        if (name.equals("stop")) {
          String offsetAttr = elem.getString("offset");
          offset[count] = parseFloatOrPercent(offsetAttr);

          String style = elem.getString("style");
          //Map<String, String> styles = parseStyleAttributes(style);
          StringDict styles = parseStyleAttributes(style);

          String colorStr = styles.get("stop-color");
          if (colorStr == null) {
            colorStr = elem.getString("stop-color");
            if (colorStr == null) colorStr = "#000000";
          }
          String opacityStr = styles.get("stop-opacity");
          if (opacityStr == null) {
            opacityStr = elem.getString("stop-opacity");
            if (opacityStr == null) opacityStr = "1";
          }
          int tupacity = PApplet.constrain(
                          (int)(PApplet.parseFloat(opacityStr) * 255), 0, 255);
          color[count] = (tupacity << 24) | parseSimpleColor(colorStr);
          count++;
        }
      }
      offset = PApplet.subset(offset, 0, count);
      color = PApplet.subset(color, 0, count);
    }
  }


  public class LinearGradient extends Gradient {
    public float x1, y1, x2, y2;

    public LinearGradient(PShapeSVG parent, XML properties) {
      super(parent, properties);

      this.x1 = getFloatWithUnit(properties, "x1", svgWidth);
      this.y1 = getFloatWithUnit(properties, "y1", svgHeight);
      this.x2 = getFloatWithUnit(properties, "x2", svgWidth);
      this.y2 = getFloatWithUnit(properties, "y2", svgHeight);

      String transformStr =
        properties.getString("gradientTransform");

      if (transformStr != null) {
        float t[] = parseTransform(transformStr).get(null);
        this.transform = new AffineTransform(t[0], t[3], t[1], t[4], t[2], t[5]);

        Point2D t1 = transform.transform(new Point2D.Float(x1, y1), null);
        Point2D t2 = transform.transform(new Point2D.Float(x2, y2), null);

        this.x1 = (float) t1.getX();
        this.y1 = (float) t1.getY();
        this.x2 = (float) t2.getX();
        this.y2 = (float) t2.getY();
      }
    }
  }


  public class RadialGradient extends Gradient {
    public float cx, cy, r;

    public RadialGradient(PShapeSVG parent, XML properties) {
      super(parent, properties);

      this.cx = getFloatWithUnit(properties, "cx", svgWidth);
      this.cy = getFloatWithUnit(properties, "cy", svgHeight);
      this.r  = getFloatWithUnit(properties, "r", svgXYSize);

      String transformStr =
        properties.getString("gradientTransform");

      if (transformStr != null) {
        float t[] = parseTransform(transformStr).get(null);
        this.transform = new AffineTransform(t[0], t[3], t[1], t[4], t[2], t[5]);

        Point2D t1 = transform.transform(new Point2D.Float(cx, cy), null);
        Point2D t2 = transform.transform(new Point2D.Float(cx + r, cy), null);

        this.cx = (float) t1.getX();
        this.cy = (float) t1.getY();
        this.r = (float) (t2.getX() - t1.getX());
      }
    }
  }


  // . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


  public static class Font extends PShapeSVG {
    public FontFace face;

    public Map<String, FontGlyph> namedGlyphs;
    public Map<Character, FontGlyph> unicodeGlyphs;

    public int glyphCount;
    public FontGlyph[] glyphs;
    public FontGlyph missingGlyph;

    int horizAdvX;


    public Font(PShapeSVG parent, XML properties) {
      super(parent, properties, false);
//      handle(parent, properties);

      XML[] elements = properties.getChildren();

      horizAdvX = properties.getInt("horiz-adv-x", 0);

      namedGlyphs = new HashMap<String, FontGlyph>();
      unicodeGlyphs = new HashMap<Character, FontGlyph>();
      glyphCount = 0;
      glyphs = new FontGlyph[elements.length];

      for (int i = 0; i < elements.length; i++) {
        String name = elements[i].getName();
        XML elem = elements[i];
        if (name == null) {
          // skip it
        } else if (name.equals("glyph")) {
          FontGlyph fg = new FontGlyph(this, elem, this);
          if (fg.isLegit()) {
            if (fg.name != null) {
              namedGlyphs.put(fg.name, fg);
            }
            if (fg.unicode != 0) {
              unicodeGlyphs.put(Character.valueOf(fg.unicode), fg);
            }
          }
          glyphs[glyphCount++] = fg;

        } else if (name.equals("missing-glyph")) {
//          System.out.println("got missing glyph inside <font>");
          missingGlyph = new FontGlyph(this, elem, this);
        } else if (name.equals("font-face")) {
          face = new FontFace(this, elem);
        } else {
          System.err.println("Ignoring " + name + " inside <font>");
        }
      }
    }


    protected void drawShape() {
      // does nothing for fonts
    }


    public void drawString(PGraphics g, String str, float x, float y, float size) {
      // 1) scale by the 1.0/unitsPerEm
      // 2) scale up by a font size
      g.pushMatrix();
      float s =  size / face.unitsPerEm;
      //System.out.println("scale is " + s);
      // swap y coord at the same time, since fonts have y=0 at baseline
      g.translate(x, y);
      g.scale(s, -s);
      char[] c = str.toCharArray();
      for (int i = 0; i < c.length; i++) {
        // call draw on each char (pulling it w/ the unicode table)
        FontGlyph fg = unicodeGlyphs.get(Character.valueOf(c[i]));
        if (fg != null) {
          fg.draw(g);
          // add horizAdvX/unitsPerEm to the x coordinate along the way
          g.translate(fg.horizAdvX, 0);
        } else {
          System.err.println("'" + c[i] + "' not available.");
        }
      }
      g.popMatrix();
    }


    public void drawChar(PGraphics g, char c, float x, float y, float size) {
      g.pushMatrix();
      float s =  size / face.unitsPerEm;
      g.translate(x, y);
      g.scale(s, -s);
      FontGlyph fg = unicodeGlyphs.get(Character.valueOf(c));
      if (fg != null) g.shape(fg);
      g.popMatrix();
    }


    public float textWidth(String str, float size) {
      float w = 0;
      char[] c = str.toCharArray();
      for (int i = 0; i < c.length; i++) {
        // call draw on each char (pulling it w/ the unicode table)
        FontGlyph fg = unicodeGlyphs.get(Character.valueOf(c[i]));
        if (fg != null) {
          w += (float) fg.horizAdvX / face.unitsPerEm;
        }
      }
      return w * size;
    }
  }


  // . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


  static class FontFace extends PShapeSVG {
    int horizOriginX;  // dflt 0
    int horizOriginY;  // dflt 0
//    int horizAdvX;     // no dflt?
    int vertOriginX;   // dflt horizAdvX/2
    int vertOriginY;   // dflt ascent
    int vertAdvY;      // dflt 1em (unitsPerEm value)

    String fontFamily;
    int fontWeight;    // can also be normal or bold (also comma separated)
    String fontStretch;
    int unitsPerEm;    // dflt 1000
    int[] panose1;     // dflt "0 0 0 0 0 0 0 0 0 0"
    int ascent;
    int descent;
    int[] bbox;        // spec says comma separated, tho not w/ forge
    int underlineThickness;
    int underlinePosition;
    //String unicodeRange; // gonna ignore for now


    public FontFace(PShapeSVG parent, XML properties) {
      super(parent, properties, true);

      unitsPerEm = properties.getInt("units-per-em", 1000);
    }


    protected void drawShape() {
      // nothing to draw in the font face attribute
    }
  }


  // . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


  public static class FontGlyph extends PShapeSVG {  // extends Path
    public String name;
    char unicode;
    int horizAdvX;

    public FontGlyph(PShapeSVG parent, XML properties, Font font) {
      super(parent, properties, true);
      super.parsePath();  // ??

      name = properties.getString("glyph-name");
      String u = properties.getString("unicode");
      unicode = 0;
      if (u != null) {
        if (u.length() == 1) {
          unicode = u.charAt(0);
          //System.out.println("unicode for " + name + " is " + u);
        } else {
          System.err.println("unicode for " + name +
                             " is more than one char: " + u);
        }
      }
      if (properties.hasAttribute("horiz-adv-x")) {
        horizAdvX = properties.getInt("horiz-adv-x");
      } else {
        horizAdvX = font.horizAdvX;
      }
    }


    protected boolean isLegit() {  // TODO need a better way to handle this...
      return vertexCount != 0;
    }
  }


  // . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


  /**
   * Get a particular element based on its SVG ID. When editing SVG by hand,
   * this is the id="" tag on any SVG element. When editing from Illustrator,
   * these IDs can be edited by expanding the layers palette. The names used
   * in the layers palette, both for the layers or the shapes and groups
   * beneath them can be used here.
   * <PRE>
   * // This code grabs "Layer 3" and the shapes beneath it.
   * PShape layer3 = svg.getChild("Layer 3");
   * </PRE>
   */
  @Override
  public PShape getChild(String name) {
    PShape found = super.getChild(name);
    if (found == null) {
      // Otherwise try with underscores instead of spaces
      // (this is how Illustrator handles spaces in the layer names).
      found = super.getChild(name.replace(' ', '_'));
    }
    // Set bounding box based on the parent bounding box
    if (found != null) {
//      found.x = this.x;
//      found.y = this.y;
      found.width = this.width;
      found.height = this.height;
    }
    return found;
  }


  /**
   * Prints out the SVG document. Useful for parsing.
   */
  public void print() {
    PApplet.println(element.toString());
  }
}
