x_ite 8.6.4 → 8.6.6

package/src/x_ite/Parser/SVGParser.js

@@ -57,8 +57,10 @@ import Vector4      from "../../standard/Math/Numbers/Vector4.js";
 import Rotation4    from "../../standard/Math/Numbers/Rotation4.js";
 import Matrix3      from "../../standard/Math/Numbers/Matrix3.js";
 import Matrix4      from "../../standard/Math/Numbers/Matrix4.js";
+import Complex      from "../../standard/Math/Numbers/Complex.js";
 import Box2         from "../../standard/Math/Geometry/Box2.js"
 import Bezier       from "../../standard/Math/Algorithms/Bezier.js";
+import MatrixStack  from "../../standard/Math/Utility/MatrixStack.js";
 
 /*
  *  Grammar
@@ -73,7 +75,7 @@ const Grammar = Expressions ({
    closeParenthesis: /\)/gy,
 
    // Units
-   length: /(em|ex|px|in|cm|mm|pt|pc)/gy,
+   length: /(em|ex|px|in|cm|mm|pt|pc|%)/gy,
    percent: /%/gy,
 
    // Values
@@ -96,16 +98,14 @@ const Grammar = Expressions ({
  */
 
 const
-   MM            = 0.001,     // One mm in meters.
-   CM            = 0.01,      // One cm in meters.
-   INCH          = 0.0254,    // One inch in meters.
-   POINT         = INCH / 72, // One point in meters.
-   PICA          = INCH / 6,  // One pica in meters.
-   PIXEL         = INCH / 90, // One pixel in meters.
-   EM            = 16,        // One em in pixels,
-   BEZIER_STEPS  = 10,        // Subdivisions of a span.
-   CIRCLE_STEPS  = 64,        // Subdivisions of a circle, used for arc.
-   GRADIENT_SIZE = 256;       // In pixels.
+   MM     = 0.001,     // One mm in meters.
+   CM     = 0.01,      // One cm in meters.
+   INCH   = 0.0254,    // One inch in meters.
+   POINT  = INCH / 72, // One point in meters.
+   PICA   = INCH / 6,  // One pica in meters.
+   PIXEL  = INCH / 90, // One pixel in meters.
+   EM     = 16,        // One em in pixels.
+   SPREAD = 16;        // Spread factor, Integer.
 
 /*
  *  Parser
@@ -124,17 +124,18 @@ function SVGParser (scene)
 
    // Options
 
-   this .solid = false; // Are 2D primitives solid.
+   this .solid = false; // Are 2D primitives solid?
 
    // Globals
 
-   this .nodes   = new Map ();
-   this .tessy   = this .createTesselator ();
-   this .canvas  = document .createElement ("canvas");
-   this .context = this .canvas .getContext ("2d");
-
-   this .canvas .width  = GRADIENT_SIZE;
-   this .canvas .height = GRADIENT_SIZE;
+   this .viewBox          = new Vector4 (0, 0, 100, 100);
+   this .modelMatrix      = new MatrixStack (Matrix4);
+   this .fillGeometries   = new Map ();
+   this .strokeGeometries = new Map ();
+   this .lineProperties   = new Map ();
+   this .tessy            = this .createTesselator ();
+   this .canvas           = document .createElement ("canvas");
+   this .context          = this .canvas .getContext ("2d");
 
    this .styles = [{
       display: "inline",
@@ -153,6 +154,42 @@ function SVGParser (scene)
       stopOpacity: 1,
       vectorEffect: "none",
    }];
+
+   // Constants
+
+   const browser = scene .getBrowser ()
+
+   switch (browser .getBrowserOption ("PrimitiveQuality"))
+   {
+      case "LOW":
+         this .BEZIER_STEPS = 6;  // Subdivisions of a span.
+         this .CIRCLE_STEPS = 20; // Subdivisions of a circle, used for arc and rounded rect.
+         break;
+      case "HIGH":
+         this .BEZIER_STEPS = 10; // Subdivisions of a span.
+         this .CIRCLE_STEPS = 64; // Subdivisions of a circle, used for arc and rounded rect.
+         break;
+      default:
+         this .BEZIER_STEPS = 8;  // Subdivisions of a span.
+         this .CIRCLE_STEPS = 32; // Subdivisions of a circle, used for arc and rounded rect.
+         break;
+   }
+
+   switch (browser .getBrowserOption ("TextureQuality"))
+   {
+      case "LOW":
+         this .GRADIENT_SIZE = 128; // In pixels.
+         break;
+      case "HIGH":
+         this .GRADIENT_SIZE = 512; // In pixels.
+         break;
+      default:
+         this .GRADIENT_SIZE = 256; // In pixels.
+         break;
+   }
+
+   this .canvas .width  = this .GRADIENT_SIZE;
+   this .canvas .height = this .GRADIENT_SIZE;
 }
 
 SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
@@ -261,16 +298,16 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       // Get attributes of svg element.
 
       const
-         defaultWidth   = this .lengthAttribute (xmlElement .getAttribute ("width"), 300),
-         defaultHeight  = this .lengthAttribute (xmlElement .getAttribute ("height"), 150),
-         defaultViewBox = new Vector4 (0, 0, defaultWidth, defaultHeight),
+         defaultWidth   = this .lengthAttribute (xmlElement .getAttribute ("width"),  300, "width"),
+         defaultHeight  = this .lengthAttribute (xmlElement .getAttribute ("height"), 150, "height"),
+         defaultViewBox = this .viewBox .set (0, 0, defaultWidth, defaultHeight),
          viewBox        = this .viewBoxAttribute (xmlElement .getAttribute ("viewBox"), defaultViewBox),
-         width          = this .lengthAttribute (xmlElement .getAttribute ("width"), viewBox [2]),
-         height         = this .lengthAttribute (xmlElement .getAttribute ("height"), viewBox [3]);
+         width          = this .lengthAttribute (xmlElement .getAttribute ("width"),  viewBox [2], "width"),
+         height         = this .lengthAttribute (xmlElement .getAttribute ("height"), viewBox [3], "height");
 
       if (true) // default
       {
-         // preserveAspectRatio="xMidYMid meet"
+         // preserveAspectRatio = "xMidYMid meet"
 
          const
             r  = width / height,
@@ -330,9 +367,6 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    element: function (xmlElement)
    {
-      if (this .used (xmlElement))
-			return;
-
       switch (xmlElement .nodeName)
       {
          case "use":
@@ -361,22 +395,11 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
             return this .pathElement (xmlElement);
       }
    },
-   used: function (xmlElement)
-   {
-      const node = this .nodes .get (xmlElement);
-
-      if (!node)
-         return false;
-
-      this .groupNodes .at (-1) .children .push (node);
-
-      return true;
-   },
    useElement: function (xmlElement)
    {
       // Get href.
 
-      const usedElement = this .hrefAttribute (xmlElement .getAttribute ("xlink:href"));
+      const usedElement = this .hrefAttribute (xmlElement .getAttribute ("href") || xmlElement .getAttribute ("xlink:href"));
 
       if (!usedElement)
          return;
@@ -389,10 +412,10 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       // Create Transform node.
 
       const
-         x      = this .lengthAttribute (xmlElement .getAttribute ("x"),      0),
-         y      = this .lengthAttribute (xmlElement .getAttribute ("y"),      0),
-         width  = this .lengthAttribute (xmlElement .getAttribute ("width"),  0),
-         height = this .lengthAttribute (xmlElement .getAttribute ("height"), 0);
+         x      = this .lengthAttribute (xmlElement .getAttribute ("x"),      0, "width"),
+         y      = this .lengthAttribute (xmlElement .getAttribute ("y"),      0, "height"),
+         width  = this .lengthAttribute (xmlElement .getAttribute ("width"),  0, "width"),
+         height = this .lengthAttribute (xmlElement .getAttribute ("height"), 0, "height");
 
       const transformNode = this .createTransform (xmlElement, new Vector2 (x, y));
 
@@ -400,12 +423,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .element (usedElement);
 
-      this .styles     .pop ();
-      this .groupNodes .pop ();
-
-      // Add node.
-
-      this .groupNodes .at (-1) .children .push (transformNode);
+      this .popAll ();
    },
    gElement: function (xmlElement)
    {
@@ -424,12 +442,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .elements (xmlElement);
 
-      this .styles     .pop ();
-      this .groupNodes .pop ();
-
-      // Add node.
-
-      this .groupNodes .at (-1) .children .push (transformNode);
+      this .popAll ();
    },
    switchElement: function (xmlElement)
    {
@@ -454,12 +467,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .elements (xmlElement);
 
-      this .styles     .pop ();
-      this .groupNodes .pop ();
-
-      // Add node.
-
-      this .groupNodes .at (-1) .children .push (transformNode);
+      this .popAll ();
    },
    aElement: function (xmlElement)
    {
@@ -471,8 +479,8 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       // Get attributes.
 
       const
-         href   = xmlElement .getAttribute ("xlink:href"),
-         title  = xmlElement .getAttribute ("xlink:title"),
+         href   = xmlElement .getAttribute ("href") || xmlElement .getAttribute ("xlink:href"),
+         title  = xmlElement .getAttribute ("title") || xmlElement .getAttribute ("xlink:title"),
          target = xmlElement .getAttribute ("target");
 
       // Create Transform node.
@@ -496,75 +504,134 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .elements (xmlElement);
 
-      this .groupNodes .pop ();
-      this .styles     .pop ();
-
-      this .groupNodes .at (-1) .children .push (transformNode);
+      this .popAll ();
    },
    rectElement: function (xmlElement)
    {
-      // Determine style.
-
-      if (!this .styleAttributes (xmlElement))
-         return;
-
       // Create Transform node.
 
       const
-         x      = this .lengthAttribute (xmlElement .getAttribute ("x"), 0),
-         y      = this .lengthAttribute (xmlElement .getAttribute ("y"), 0),
-         width  = this .lengthAttribute (xmlElement .getAttribute ("width"), 0),
-         height = this .lengthAttribute (xmlElement .getAttribute ("height"), 0);
+         x      = this .lengthAttribute (xmlElement .getAttribute ("x"),      0, "width"),
+         y      = this .lengthAttribute (xmlElement .getAttribute ("y"),      0, "height"),
+         width  = this .lengthAttribute (xmlElement .getAttribute ("width"),  0, "width"),
+         height = this .lengthAttribute (xmlElement .getAttribute ("height"), 0, "height");
 
-      const
-         scene         = this .getExecutionContext (),
-         size          = new Vector2 (width, height),
-         center        = new Vector2 (x + width / 2, y + height / 2),
-         bbox          = new Box2 (size, center),
-         transformNode = this .createTransform (xmlElement, center);
+      let
+         rx = Math .max (0, this .lengthAttribute (xmlElement .getAttribute ("rx"), 0, "width")),
+         ry = Math .max (0, this .lengthAttribute (xmlElement .getAttribute ("ry"), 0, "height"));
 
-      this .groupNodes .push (transformNode);
+      if (rx === 0 && ry === 0)
+      {
+         // Determine style.
 
-      // Create nodes.
+         if (!this .styleAttributes (xmlElement))
+            return;
+
+         // Create Transform node.
 
-      if (this .style .fillType !== "none")
-      {
          const
-            shapeNode     = scene .createNode ("Shape"),
-            rectangleNode = scene .createNode ("Rectangle2D");
+            scene         = this .getExecutionContext (),
+            size          = new Vector2 (width, height),
+            center        = new Vector2 (x + width / 2, y + height / 2),
+            bbox          = new Box2 (size, center),
+            transformNode = this .createTransform (xmlElement, center);
 
-         shapeNode .appearance = this .createFillAppearance (bbox);
-         shapeNode .geometry   = rectangleNode;
-         rectangleNode .solid  = this .solid;
-         rectangleNode .size   = size;
+         this .groupNodes .push (transformNode);
 
-         transformNode .children .push (shapeNode);
-      }
+         // Create nodes.
 
-      if (this .style .strokeType !== "none")
+         if (this .style .fillType !== "none")
+         {
+            const
+               shapeNode     = scene .createNode ("Shape"),
+               rectangleNode = this .fillGeometries .get (xmlElement);
+
+            transformNode .children .push (shapeNode);
+            shapeNode .appearance = this .createFillAppearance (bbox);
+
+            if (rectangleNode)
+            {
+               shapeNode .geometry = rectangleNode;
+            }
+            else
+            {
+               const rectangleNode = scene .createNode ("Rectangle2D");
+
+               this .fillGeometries .set (xmlElement, rectangleNode);
+
+               shapeNode .geometry  = rectangleNode;
+               rectangleNode .solid = this .solid;
+               rectangleNode .size  = size;
+            }
+         }
+
+         if (this .style .strokeType !== "none")
+         {
+            const
+               shapeNode    = scene .createNode ("Shape"),
+               polylineNode = this .strokeGeometries .get (xmlElement);
+
+            transformNode .children .push (shapeNode);
+            shapeNode .appearance = this .createStrokeAppearance ();
+
+            if (polylineNode)
+            {
+               shapeNode .geometry = polylineNode;
+            }
+            else
+            {
+               const
+                  polylineNode = scene .createNode ("Polyline2D"),
+                  width1_2     = width / 2,
+                  height1_2    = height / 2;
+
+               this .strokeGeometries .set (xmlElement, polylineNode);
+
+               shapeNode .geometry = polylineNode;
+
+               polylineNode .lineSegments = [ width1_2,  height1_2,
+                                             -width1_2,  height1_2,
+                                             -width1_2, -height1_2,
+                                              width1_2, -height1_2,
+                                              width1_2,  height1_2];
+            }
+         }
+
+         this .popAll ();
+      }
+      else
       {
+         // Create points.
+
+         if (rx && !ry) ry = rx;
+         if (ry && !rx) rx = ry;
+
+         rx = Math .min (rx, width / 2);
+         ry = Math .min (ry, height / 2);
+
          const
-            shapeNode     = scene .createNode ("Shape"),
-            polylineNode  = scene .createNode ("Polyline2D"),
-            width1_2      = width / 2,
-            height1_2     = height / 2;
+            xOffsets = [x + width - rx, x + rx , x + rx, x + width - rx],
+            yOffsets = [y + height - ry, y + height - ry, y + ry, y + ry],
+            points   = Object .assign ([ ], { closed: true });
 
-         shapeNode .appearance = this .createStrokeAppearance ();
-         shapeNode .geometry   = polylineNode;
+         for (let c = 0; c < 4; ++ c)
+         {
+            const s = c * Math .PI / 2;
 
-         polylineNode .lineSegments = [ width1_2,  height1_2,
-                                       -width1_2,  height1_2,
-                                       -width1_2, -height1_2,
-                                        width1_2, -height1_2,
-                                        width1_2,  height1_2];
+            for (let i = 0, N = this .CIRCLE_STEPS / 4; i < N; ++ i)
+            {
+               const p = Complex .Polar (1, s + Math .PI / 2 * i / (N - 1));
 
-         transformNode .children .push (shapeNode);
-      }
+               points .push (new Vector3 (xOffsets [c] + p .real * rx, yOffsets [c] + p .imag * ry, 0));
+            }
+         }
 
-      this .groupNodes .pop ();
-      this .styles     .pop ();
+         points .pop ();
 
-      this .groupNodes .at (-1) .children .push (transformNode);
+         // Create nodes.
+
+         this .pathLikeElement (xmlElement, [points]);
+      }
    },
    circleElement: function (xmlElement)
    {
@@ -576,8 +643,8 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       // Create Transform node.
 
       const
-         cx = this .lengthAttribute (xmlElement .getAttribute ("cx"), 0),
-         cy = this .lengthAttribute (xmlElement .getAttribute ("cy"), 0),
+         cx = this .lengthAttribute (xmlElement .getAttribute ("cx"), 0, "width"),
+         cy = this .lengthAttribute (xmlElement .getAttribute ("cy"), 0, "height"),
          r  = this .lengthAttribute (xmlElement .getAttribute ("r"),  0);
 
       const
@@ -593,33 +660,52 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       {
          const
             shapeNode = scene .createNode ("Shape"),
-            diskNode  = scene .createNode ("Disk2D");
+            diskNode  = this .fillGeometries .get (xmlElement);
 
+         transformNode .children .push (shapeNode);
          shapeNode .appearance = this .createFillAppearance (bbox);
-         shapeNode .geometry   = diskNode;
-         diskNode .solid       = this .solid;
-         diskNode .outerRadius = r;
 
-         transformNode .children .push (shapeNode);
+         if (diskNode)
+         {
+            shapeNode .geometry = diskNode;
+         }
+         else
+         {
+            const diskNode = scene .createNode ("Disk2D");
+
+            this .fillGeometries .set (xmlElement, diskNode);
+
+            shapeNode .geometry   = diskNode;
+            diskNode .solid       = this .solid;
+            diskNode .outerRadius = r;
+         }
       }
 
       if (this .style .strokeType !== "none")
       {
          const
             shapeNode  = scene .createNode ("Shape"),
-            circleNode = scene .createNode ("Circle2D");
+            circleNode = this .strokeGeometries .get (xmlElement);
 
+         transformNode .children .push (shapeNode);
          shapeNode .appearance = this .createStrokeAppearance ();
-         shapeNode .geometry   = circleNode;
-         circleNode .radius    = r;
 
-         transformNode .children .push (shapeNode);
-      }
+         if (circleNode)
+         {
+            shapeNode .geometry = circleNode;
+         }
+         else
+         {
+            const circleNode = scene .createNode ("Circle2D");
 
-      this .groupNodes .pop ();
-      this .styles     .pop ();
+            this .strokeGeometries .set (xmlElement, circleNode);
 
-      this .groupNodes .at (-1) .children .push (transformNode);
+            shapeNode .geometry = circleNode;
+            circleNode .radius  = r;
+         }
+      }
+
+      this .popAll ();
    },
    ellipseElement: function (xmlElement)
    {
@@ -631,10 +717,10 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       // Create Transform node.
 
       const
-         cx = this .lengthAttribute (xmlElement .getAttribute ("cx"), 0),
-         cy = this .lengthAttribute (xmlElement .getAttribute ("cy"), 0),
-         rx = this .lengthAttribute (xmlElement .getAttribute ("rx"), 0),
-         ry = this .lengthAttribute (xmlElement .getAttribute ("ry"), 0);
+         cx = this .lengthAttribute (xmlElement .getAttribute ("cx"), 0, "width"),
+         cy = this .lengthAttribute (xmlElement .getAttribute ("cy"), 0, "height"),
+         rx = this .lengthAttribute (xmlElement .getAttribute ("rx"), 0, "width"),
+         ry = this .lengthAttribute (xmlElement .getAttribute ("ry"), 0, "height");
 
       const
          scene         = this .getExecutionContext (),
@@ -650,33 +736,52 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       {
          const
             shapeNode = scene .createNode ("Shape"),
-            diskNode  = scene .createNode ("Disk2D");
+            diskNode  = this .fillGeometries .get (xmlElement);
 
+         transformNode .children .push (shapeNode);
          shapeNode .appearance = this .createFillAppearance (bbox);
-         shapeNode .geometry   = diskNode;
-         diskNode .solid       = this .solid;
-         diskNode .outerRadius = rMin;
 
-         transformNode .children .push (shapeNode);
+         if (diskNode)
+         {
+            shapeNode .geometry = diskNode;
+         }
+         else
+         {
+            const diskNode = scene .createNode ("Disk2D");
+
+            this .fillGeometries .set (xmlElement, diskNode);
+
+            shapeNode .geometry   = diskNode;
+            diskNode .solid       = this .solid;
+            diskNode .outerRadius = rMin;
+         }
       }
 
       if (this .style .strokeType !== "none")
       {
          const
             shapeNode  = scene .createNode ("Shape"),
-            circleNode = scene .createNode ("Circle2D");
+            circleNode = this .strokeGeometries .get (xmlElement);
 
+         transformNode .children .push (shapeNode);
          shapeNode .appearance = this .createStrokeAppearance ();
-         shapeNode .geometry   = circleNode;
-         circleNode .radius    = rMin;
 
-         transformNode .children .push (shapeNode);
-      }
+         if (circleNode)
+         {
+            shapeNode .geometry = circleNode;
+         }
+         else
+         {
+            const circleNode = scene .createNode ("Circle2D");
 
-      this .groupNodes .pop ();
-      this .styles     .pop ();
+            this .strokeGeometries .set (xmlElement, circleNode);
 
-      this .groupNodes .at (-1) .children .push (transformNode);
+            shapeNode .geometry = circleNode;
+            circleNode .radius  = rMin;
+         }
+      }
+
+      this .popAll ();
    },
    textElement: function (xmlElement)
    {
@@ -684,107 +789,81 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    imageElement: function (xmlElement)
    {
-      // Create Transform node.
+      const transformNode = this .fillGeometries .get (xmlElement);
 
-      const
-         x      = this .lengthAttribute (xmlElement .getAttribute ("x"),      0),
-         y      = this .lengthAttribute (xmlElement .getAttribute ("y"),      0),
-         width  = this .lengthAttribute (xmlElement .getAttribute ("width"),  0),
-         height = this .lengthAttribute (xmlElement .getAttribute ("height"), 0),
-         href   = xmlElement .getAttribute ("xlink:href");
+      if (transformNode)
+      {
+         this .groupNodes .at (-1) .children .push (transformNode);
+      }
+      else
+      {
+         // Determine style.
 
-      const
-         scene         = this .getExecutionContext (),
-         transformNode = this .createTransform (xmlElement, new Vector2 (x + width / 2, y + height / 2), new Vector2 (1, -1));
+         if (!this .styleAttributes (xmlElement))
+            return;
 
-      this .groupNodes .push (transformNode);
+         // Create Transform node.
 
-      // Create nodes.
+         const
+            x      = this .lengthAttribute (xmlElement .getAttribute ("x"),      0, "width"),
+            y      = this .lengthAttribute (xmlElement .getAttribute ("y"),      0, "height"),
+            width  = this .lengthAttribute (xmlElement .getAttribute ("width"),  0, "width"),
+            height = this .lengthAttribute (xmlElement .getAttribute ("height"), 0, "height"),
+            href   = xmlElement .getAttribute ("href") || xmlElement .getAttribute ("xlink:href");
 
-      const
-         shapeNode      = scene .createNode ("Shape"),
-         appearanceNode = scene .createNode ("Appearance"),
-         textureNode    = scene .createNode ("ImageTexture"),
-         rectangleNode  = scene .createNode ("Rectangle2D");
+         const
+            scene         = this .getExecutionContext (),
+            transformNode = this .createTransform (xmlElement, new Vector2 (x + width / 2, y + height / 2), new Vector2 (1, -1));
 
-      shapeNode .appearance          = appearanceNode;
-      shapeNode .geometry            = rectangleNode;
-      appearanceNode .texture        = textureNode;
-      textureNode .url               = [href];
-      textureNode .textureProperties = this .texturePropertiesNode;
-      rectangleNode .solid           = this .solid;
-      rectangleNode .size            = new Vector2 (width, height);
+         this .fillGeometries .set (xmlElement, transformNode);
+         this .groupNodes .push (transformNode);
 
-      transformNode .children .push (shapeNode);
+         // Create nodes.
 
-      this .groupNodes .pop ();
-      this .groupNodes .at (-1) .children .push (transformNode);
+         const
+            shapeNode      = scene .createNode ("Shape"),
+            appearanceNode = scene .createNode ("Appearance"),
+            textureNode    = scene .createNode ("ImageTexture"),
+            rectangleNode  = scene .createNode ("Rectangle2D");
+
+         shapeNode .appearance          = appearanceNode;
+         shapeNode .geometry            = rectangleNode;
+         appearanceNode .texture        = textureNode;
+         textureNode .url               = [href];
+         textureNode .textureProperties = this .texturePropertiesNode;
+         rectangleNode .solid           = this .solid;
+         rectangleNode .size            = new Vector2 (width, height);
+
+         transformNode .children .push (shapeNode);
+
+         this .popAll ();
+      }
    },
-   polylineElement: function (xmlElement, closed = false)
+   polylineElement: function (xmlElement)
    {
-      const points = Object .assign ([ ], { index: 0 });
+      // Get points.
 
-      if (!this .pointsAttribute (xmlElement .getAttribute ("points"), points))
-         return;
+      const points = [ ];
 
-      // Determine style.
-
-      if (!this .styleAttributes (xmlElement))
+      if (!this .pointsAttribute (xmlElement .getAttribute ("points"), points))
          return;
 
-      // Create Transform node.
-
-      const
-         scene         = this .getExecutionContext (),
-         transformNode = this .createTransform (xmlElement),
-         bbox          = new Box2 (Vector2 .min (... points), Vector2 .max (... points), true);
-
-      this .groupNodes .push (transformNode);
-
       // Create nodes.
 
-      const coordinateNode = scene .createNode ("Coordinate");
-
-      coordinateNode .point .push (... points);
-
-      if (this .style .fillType !== "none")
-      {
-         const
-            shapeNode    = scene .createNode ("Shape"),
-            geometryNode = scene .createNode ("IndexedTriangleSet");
-
-         shapeNode .appearance  = this .createFillAppearance (bbox);
-         shapeNode .geometry    = geometryNode;
-         geometryNode .solid    = this .solid;
-         geometryNode .index    = this .triangulatePolygon ([points], coordinateNode);
-         geometryNode .texCoord = this .createTextureCoordinate (coordinateNode, bbox);
-         geometryNode .coord    = coordinateNode;
-
-         transformNode .children .push (shapeNode);
-      }
-
-      if (this .style .strokeType !== "none")
-      {
-         const
-            shapeNode    = scene .createNode ("Shape"),
-            geometryNode = scene .createNode ("IndexedLineSet");
+      this .pathLikeElement (xmlElement, [points]);
+   },
+   polygonElement: function (xmlElement)
+   {
+      // Get points.
 
-         shapeNode .appearance    = this .createStrokeAppearance ();
-         shapeNode .geometry      = geometryNode;
-         geometryNode .coordIndex = [... points .keys (), ... (closed ? [points [0]] : [ ]), -1];
-         geometryNode .coord      = coordinateNode;
+      const points = Object .assign ([ ], { closed: true });
 
-         transformNode .children .push (shapeNode);
-      }
+      if (!this .pointsAttribute (xmlElement .getAttribute ("points"), points))
+         return;
 
-      this .groupNodes .pop ();
-      this .styles     .pop ();
+      // Create nodes.
 
-      this .groupNodes .at (-1) .children .push (transformNode);
-   },
-   polygonElement: function (xmlElement)
-   {
-      this .polylineElement (xmlElement, true);
+      this .pathLikeElement (xmlElement, [points]);
    },
    pathElement: function (xmlElement)
    {
@@ -795,11 +874,41 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       if (!this .dAttribute (xmlElement .getAttribute ("d"), contours))
          return;
 
+      // Create nodes.
+
+      this .pathLikeElement (xmlElement, contours);
+   },
+   pathLikeElement: function (xmlElement, contours)
+   {
       // Determine style.
 
       if (!this .styleAttributes (xmlElement))
          return;
 
+      // Filter consecutive equal points.
+
+      const EPSILON = 1e-9; // Min point distance.
+
+      contours = contours .map (function (points)
+      {
+         if (points .closed)
+         {
+            return Object .assign (points .filter ((p, i, a) => p .distance (a [(i + 1) % a .length]) > EPSILON),
+            {
+               closed: true,
+            });
+         }
+         else
+         {
+            return points .filter ((p, i, a) => !i || p .distance (a [i - 1]) > EPSILON);
+         }
+      })
+      .filter (points => points .length > 2);
+
+      // Add index property to points.
+
+      contours .forEach ((points, i, a) => points .index = i ? a [i - 1] .index + a [i - 1] .length : 0);
+
       // Create Transform node.
 
       const
@@ -823,79 +932,111 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       {
          const
             shapeNode    = scene .createNode ("Shape"),
-            geometryNode = scene .createNode ("IndexedTriangleSet");
-
-         shapeNode .appearance  = this .createFillAppearance (bbox);
-         shapeNode .geometry    = geometryNode;
-         geometryNode .solid    = this .solid;
-         geometryNode .index    = this .triangulatePolygon (contours, coordinateNode);
-         geometryNode .texCoord = this .createTextureCoordinate (coordinateNode, bbox);
-         geometryNode .coord    = coordinateNode;
+            geometryNode = this .fillGeometries .get (xmlElement);
 
          transformNode .children .push (shapeNode);
+         shapeNode .appearance = this .createFillAppearance (bbox);
+
+         if (geometryNode)
+         {
+            shapeNode .geometry = geometryNode;
+         }
+         else
+         {
+            const geometryNode = scene .createNode ("IndexedTriangleSet");
+
+            this .fillGeometries .set (xmlElement, geometryNode);
+
+            shapeNode .geometry    = geometryNode;
+            geometryNode .solid    = this .solid;
+            geometryNode .index    = this .triangulatePolygon (contours, coordinateNode);
+            geometryNode .texCoord = this .createTextureCoordinate (coordinateNode, bbox);
+            geometryNode .coord    = coordinateNode;
+         }
       }
 
       if (this .style .strokeType !== "none")
       {
          const
             shapeNode    = scene .createNode ("Shape"),
-            geometryNode = scene .createNode ("IndexedLineSet");
+            geometryNode = this .strokeGeometries .get (xmlElement);
 
+         transformNode .children .push (shapeNode);
          shapeNode .appearance = this .createStrokeAppearance ();
-         shapeNode .geometry   = geometryNode;
-         geometryNode .coord   = coordinateNode;
 
-         for (const points of contours)
+         if (geometryNode)
+         {
+            shapeNode .geometry = geometryNode;
+         }
+         else
          {
-            for (const i of points .keys ())
-               geometryNode .coordIndex .push (points .index + i);
+            const geometryNode = scene .createNode ("IndexedLineSet");
 
-            if (points .closed)
-               geometryNode .coordIndex .push (points .index);
+            this .strokeGeometries .set (xmlElement, geometryNode);
 
-            geometryNode .coordIndex .push (-1);
-         }
+            shapeNode .geometry = geometryNode;
+            geometryNode .coord = coordinateNode;
 
-         transformNode .children .push (shapeNode);
-      }
+            // Create contour indices.
 
-      this .groupNodes .pop ();
-      this .styles     .pop ();
+            const indices = geometryNode .coordIndex;
 
-      this .groupNodes .at (-1) .children .push (transformNode);
+            for (const points of contours)
+            {
+               for (const i of points .keys ())
+                  indices .push (points .index + i);
+
+               if (points .closed)
+                  indices .push (points .index);
+
+               indices .push (-1);
+            }
+         }
+      }
+
+      this .popAll ();
    },
-   linearGradientElementURL: function (xmlElement, bbox)
+   linearGradientElementUrl: function (xmlElement, bbox)
    {
       const
-         g        = this .linearGradientElement (xmlElement, { stops: [ ] }),
+         g        = this .linearGradientElement (xmlElement, bbox, { stops: [ ] }),
          gradient = this .context .createLinearGradient (g .x1, g .y1, g .x2, g .y2);
 
-      for (const [o, c, a] of g .stops)
-         gradient .addColorStop (o, `rgba(${c .r * 255},${c .g * 255},${c .b * 255},${a})`);
-
       return this .drawGradient (gradient, g, bbox);
    },
-   linearGradientElement: function (xmlElement, gradient)
+   linearGradientElement: function (xmlElement, bbox, gradient)
    {
       if (xmlElement .nodeName !== "linearGradient")
          return;
 
       // Attribute xlink:href
 
-      const refElement = this .hrefAttribute (xmlElement .getAttribute ("xlink:href"));
+      const refElement = this .hrefAttribute (xmlElement .getAttribute ("href") || xmlElement .getAttribute ("xlink:href"));
 
       if (refElement)
-         this .gradientElement (refElement, gradient);
+         this .gradientElement (refElement, bbox, gradient);
 
       // Attributes
 
-      gradient .x1        = this .lengthAttribute (xmlElement .getAttribute ("x1"), gradient .x1 || 0);
-      gradient .y1        = this .lengthAttribute (xmlElement .getAttribute ("y1"), gradient .y1 || 0);
-      gradient .x2        = this .lengthAttribute (xmlElement .getAttribute ("x2"), gradient .x2 || 1);
-      gradient .y2        = this .lengthAttribute (xmlElement .getAttribute ("y2"), gradient .y2 || 0);
+      gradient .x1        = this .lengthAttribute (xmlElement .getAttribute ("x1"), gradient .x1 || 0, "width");
+      gradient .y1        = this .lengthAttribute (xmlElement .getAttribute ("y1"), gradient .y1 || 0, "height");
+      gradient .x2        = this .lengthAttribute (xmlElement .getAttribute ("x2"), gradient .x2 || 1, "width");
+      gradient .y2        = this .lengthAttribute (xmlElement .getAttribute ("y2"), gradient .y2 || 0, "height");
       gradient .units     = xmlElement .getAttribute ("gradientUnits") || "objectBoundingBox";
       gradient .transform = this .transformAttribute (xmlElement .getAttribute ("gradientTransform"));
 
+      // Spread matrix
+
+      const
+         s = new Matrix3 (),
+         c = new Vector2 (gradient .x1, gradient .y1);
+
+      s .translate (c);
+      s .scale (new Vector2 (SPREAD, SPREAD));
+      s .translate (c .negate ());
+
+      gradient .spreadMatrix = s;
+
       // Stops
 
       for (const childNode of xmlElement .childNodes)
@@ -903,38 +1044,47 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       return gradient;
    },
-   radialGradientElementURL: function (xmlElement, bbox)
+   radialGradientElementUrl: function (xmlElement, bbox)
    {
       const
-         g        = this .radialGradientElement (xmlElement, { stops: [ ] }),
+         g        = this .radialGradientElement (xmlElement, bbox, { stops: [ ] }),
          gradient = this .context .createRadialGradient (g .fx, g .fy, g. fr, g .cx, g .cy, g .r);
 
-      for (const [o, c, a] of g .stops)
-         gradient .addColorStop (o, `rgba(${c .r * 255},${c .g * 255},${c .b * 255},${a})`);
-
       return this .drawGradient (gradient, g, bbox);
    },
-   radialGradientElement: function (xmlElement, gradient)
+   radialGradientElement: function (xmlElement, bbox, gradient)
    {
       // Attribute xlink:href
 
-      const refElement = this .hrefAttribute (xmlElement .getAttribute ("xlink:href"));
+      const refElement = this .hrefAttribute (xmlElement .getAttribute ("href") || xmlElement .getAttribute ("xlink:href"));
 
       if (refElement)
-         this .gradientElement (refElement, gradient);
+         this .gradientElement (refElement, bbox, gradient);
 
       // Attributes
 
-      gradient .cx           = this .lengthAttribute (xmlElement .getAttribute ("cx"), gradient .cx || 0.5),
-      gradient .cy           = this .lengthAttribute (xmlElement .getAttribute ("cy"), gradient .cy || 0.5),
+      gradient .cx           = this .lengthAttribute (xmlElement .getAttribute ("cx"), gradient .cx || 0.5, "width"),
+      gradient .cy           = this .lengthAttribute (xmlElement .getAttribute ("cy"), gradient .cy || 0.5, "height"),
       gradient .r            = this .lengthAttribute (xmlElement .getAttribute ("r"),  gradient .r  || 0.5),
-      gradient .fx           = this .lengthAttribute (xmlElement .getAttribute ("fx"), gradient .fx || gradient .cx),
-      gradient .fy           = this .lengthAttribute (xmlElement .getAttribute ("fy"), gradient .fy || gradient .cy),
+      gradient .fx           = this .lengthAttribute (xmlElement .getAttribute ("fx"), gradient .fx || gradient .cx, "width"),
+      gradient .fy           = this .lengthAttribute (xmlElement .getAttribute ("fy"), gradient .fy || gradient .cy, "height"),
       gradient .fr           = this .lengthAttribute (xmlElement .getAttribute ("fr"), gradient .fr || 0),
       gradient .units        = xmlElement .getAttribute ("gradientUnits") || "objectBoundingBox";
       gradient .spreadMethod = xmlElement .getAttribute ("spreadMethod");
       gradient .transform    = this .transformAttribute (xmlElement .getAttribute ("gradientTransform"));
 
+      // Spread matrix
+
+      const
+         s = new Matrix3 (),
+         c = new Vector2 (gradient .fx, gradient .fy);
+
+      s .translate (c);
+      s .scale (new Vector2 (SPREAD, SPREAD));
+      s .translate (c .negate ());
+
+      gradient .spreadMatrix = s;
+
       // Stops
 
       for (const childNode of xmlElement .childNodes)
@@ -942,7 +1092,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       return gradient;
    },
-   gradientElement: function (xmlElement, gradient)
+   gradientElement: function (xmlElement, bbox, gradient)
    {
       if (!xmlElement)
          return;
@@ -950,9 +1100,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       switch (xmlElement .nodeName)
       {
          case "linearGradient":
-            return this .linearGradientElement (xmlElement, gradient);
+            return this .linearGradientElement (xmlElement, bbox, gradient);
          case "radialGradient":
-            return this .radialGradientElement (xmlElement, gradient);
+            return this .radialGradientElement (xmlElement, bbox, gradient);
       }
    },
    gradientChild: function (xmlElement, gradient)
@@ -967,6 +1117,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       const offset = this .percentAttribute (xmlElement .getAttribute ("offset"), 0);
 
+      if (offset < 0 || offset > 1)
+         return;
+
       const { stopColor, stopOpacity } = this .style;
 
       gradient .stops .push ([offset, stopColor, stopOpacity]);
@@ -975,9 +1128,50 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    drawGradient: function (gradient, g, bbox)
    {
+      // Add color stops.
+
+      switch (g .spreadMethod)
+      {
+         default: // pad
+         {
+            g .spreadMatrix .identity ();
+
+            for (const [o, c, a] of g .stops)
+               gradient .addColorStop (o, this .cssColor (c, a));
+
+            break;
+         }
+         case "repeat":
+         {
+            for (let i = 0; i < SPREAD; ++ i)
+            {
+               const s = i / SPREAD;
+
+               for (const [o, c, a] of g .stops)
+                  gradient .addColorStop (s + o / SPREAD, this .cssColor (c, a));
+            }
+
+            break;
+         }
+         case "reflect":
+         {
+            for (let i = 0; i < SPREAD; ++ i)
+            {
+               const s = i / SPREAD;
+
+               for (const [o, c, a] of g .stops)
+                  gradient .addColorStop (s + (i % 2 ? 1 - o : o) / SPREAD, this .cssColor (c, a));
+            }
+
+            break;
+         }
+      }
+
+      // Create Matrix.
+
       const m = new Matrix3 ();
 
-      m .scale (new Vector2 (GRADIENT_SIZE / 2, GRADIENT_SIZE / 2));
+      m .scale (new Vector2 (this .GRADIENT_SIZE / 2, this .GRADIENT_SIZE / 2));
       m .translate (Vector2 .One);
       m .scale (new Vector2 (1, -1));
 
@@ -987,6 +1181,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          m .multLeft (new Matrix3 (2, 0, 0, 0, 2, 0, -1, -1, 1));
 
       m .multLeft (g .transform);
+      m .multLeft (g .spreadMatrix);
 
       // Paint.
 
@@ -994,8 +1189,8 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       cx .fillStyle = gradient;
       cx .save ();
-      cx .clearRect (0, 0, GRADIENT_SIZE, GRADIENT_SIZE);
-      cx .rect (0, 0, GRADIENT_SIZE, GRADIENT_SIZE);
+      cx .clearRect (0, 0, this .GRADIENT_SIZE, this .GRADIENT_SIZE);
+      cx .rect (0, 0, this .GRADIENT_SIZE, this .GRADIENT_SIZE);
       cx .transform (m [0], m [1], m [3], m [4], m [6], m [7]);
       cx .fill ();
       cx .restore ();
@@ -1003,6 +1198,10 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       // Use PNG because image can have alpha channel.
       return this .canvas .toDataURL ("image/png");
    },
+   patternUrl: function (xmlElement)
+   {
+      //console .debug ("pattern");
+   },
    idAttribute: function (attribute, node)
    {
       if (attribute === null)
@@ -1057,7 +1256,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       return this .document .getElementById (hash);
    },
-   lengthAttribute: function (attribute, defaultValue)
+   lengthAttribute: function (attribute, defaultValue, percent)
    {
       // Returns length in pixel.
 
@@ -1100,6 +1299,23 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                case "pc":
                   value *= PICA / PIXEL;
                   break;
+               case "%":
+               {
+                  switch (percent)
+                  {
+                     case "width":
+                        value *= this .viewBox [2] / 100;
+                        break;
+                     case "height":
+                        value *= this .viewBox [3] / 100;
+                        break;
+                     default:
+                        value *= Math .hypot (this .viewBox [2], this .viewBox [3]) / 100;
+                        break;
+                     }
+
+                  break;
+               }
             }
          }
 
@@ -1167,7 +1383,6 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       let
          points   = [ ],
-         index    = 0,
          previous = "",
          command  = "",
          relative = false,
@@ -1195,11 +1410,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                // moveto
 
                if (points .length > 2)
-               {
-                  contours .push (Object .assign (points, { index: index, closed: false }));
-
-                  index += points .length;
-               }
+                  contours .push (Object .assign (points, { closed: false }));
 
                points = [ ];
 
@@ -1365,7 +1576,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                                  y  += ay;
                               }
 
-                              Bezier .quadric (ax, ay, 0, x1, y1, 0, x, y, 0, BEZIER_STEPS, points);
+                              Bezier .quadric (ax, ay, 0, x1, y1, 0, x, y, 0, this .BEZIER_STEPS, points);
 
                               ax = x;
                               ay = y;
@@ -1426,7 +1637,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                            }
                         }
 
-                        Bezier .quadric (ax, ay, 0, x1, y1, 0, x, y, 0, BEZIER_STEPS, points);
+                        Bezier .quadric (ax, ay, 0, x1, y1, 0, x, y, 0, this .BEZIER_STEPS, points);
 
                         ax = x;
                         ay = y;
@@ -1492,7 +1703,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                                        y  += ay;
                                     }
 
-                                    Bezier .cubic (ax, ay, 0, x1, y1, 0, x2, y2, 0, x, y, 0, BEZIER_STEPS, points);
+                                    Bezier .cubic (ax, ay, 0, x1, y1, 0, x2, y2, 0, x, y, 0, this .BEZIER_STEPS, points);
 
                                     ax = x;
                                     ay = y;
@@ -1569,7 +1780,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                                  }
                               }
 
-                              Bezier .cubic (ax, ay, 0, x1, y1, 0, x2, y2, 0, x, y, 0, BEZIER_STEPS, points);
+                              Bezier .cubic (ax, ay, 0, x1, y1, 0, x2, y2, 0, x, y, 0, this .BEZIER_STEPS, points);
 
                               ax = x;
                               ay = y;
@@ -1641,7 +1852,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                                           y += ay;
                                        }
 
-                                       Bezier .arc (ax, ay, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y, CIRCLE_STEPS, points);
+                                       Bezier .arc (ax, ay, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y, this .CIRCLE_STEPS, points);
 
                                        ax = x;
                                        ay = y;
@@ -1671,9 +1882,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                   ax = points [0] .x;
                   ay = points [0] .y;
 
-                  contours .push (Object .assign (points, { index: index, closed: true }));
-
-                  index += points .length;
+                  contours .push (Object .assign (points, { closed: true }));
                }
 
                points = [ ];
@@ -1687,7 +1896,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       }
 
       if (points .length > 2)
-		   contours .push (Object .assign (points, { index: index, closed: false }));
+		   contours .push (Object .assign (points, { closed: false }));
 
       return !! contours .length;
    },
@@ -1923,45 +2132,24 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       return matrix;
    },
-   styleAttributes: (function ()
-   {
-      const Styles = [
-         "display",
-         "fill",
-         "fill-opacity",
-         "fill-rule",
-         "stroke",
-         "stroke-opacity",
-         "stroke-width",
-         "opacity",
-         "stop-color",
-         "stop-opacity",
-         "vector-effect",
-      ];
-
-      return function (xmlElement)
-      {
-         const style = Object .assign ({ }, this .styles [0]);
-
-         if (this .style .display === "none")
-            return false;
+   styleAttributes: function (xmlElement)
+   {
+      const style = Object .assign ({ }, this .styles .at (-1));
 
-         this .styles .push (style);
+      if (this .style .display === "none")
+         return false;
 
-         for (const style of Styles)
-         {
-            const attribute = xmlElement .getAttribute (style);
+      this .styles .push (style);
 
-            this .parseStyle (style, attribute ?? "default");
-         }
+      for (const attribute of xmlElement .attributes)
+         this .parseStyle (attribute .name, attribute .value)
 
-         // Style attribute has higher precedence.
+      // Style attribute has higher precedence.
 
-         this .styleAttribute (xmlElement .getAttribute ("style"));
+      this .styleAttribute (xmlElement .getAttribute ("style"));
 
-         return true;
-      };
-   })(),
+      return true;
+   },
    styleAttribute: function (attribute)
    {
       if (attribute === null)
@@ -1981,6 +2169,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    parseStyle: function (style, value)
    {
+      if (value === "inherit" || value == "unset")
+         return;
+
       this .parseValue (value);
 
       switch (style)
@@ -2022,15 +2213,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    displayStyle: function (value)
    {
-      if (value === null)
-         return;
-
       if (value === "default")
-         return;
-
-      if (value === "inherit")
       {
-         this .style .display = styles .at (-1) .display;
+         this .style .display = "inline";
          return;
       }
 
@@ -2038,10 +2223,11 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    fillStyle: function (value)
    {
-      if (this .urlValue ())
+      if (value === "default")
       {
-         this .style .fillType = "URL";
-         this .style .fillURL  = this .result [1] .trim ();
+         this .style .fillType  = this .styles [0] .fillType;
+         this .style .fillColor = this .styles [0] .fillColor;
+         this .style .fillURL   = this .styles [0] .fillURL;
          return;
       }
 
@@ -2053,31 +2239,29 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       if (value === "none")
       {
-         this .style .fillType ="none";
+         this .style .fillType = "none";
          return;
       }
 
-      if (!value .match (/^(?:inherit|unset|default)$/))
+      if (this .urlValue ())
       {
-         if (this .colorValue ())
-         {
-            this .style .fillType  = "COLOR";
-            this .style .fillColor = this .value .copy ();
-            return;
-         }
+         this .style .fillType = "URL";
+         this .style .fillURL  = this .result [1] .trim ();
+         return;
       }
 
-      // inherit
-
-      this .style .fillType  = this .styles .at (-1) .fillType;
-      this .style .fillColor = this .styles .at (-1) .fillColor;
-      this .style .fillURL   = this .styles .at (-1) .fillURL;
+      if (this .colorValue (this .styles .at (-1) .fillColor))
+      {
+         this .style .fillType  = "COLOR";
+         this .style .fillColor = this .value .copy ();
+         return;
+      }
    },
    fillOpacityStyle: function (value)
    {
-      if (this .double ())
+      if (value === "default")
       {
-         this .style .fillOpacity = Algorithm .clamp (this .value, 0, 1);
+         this .style .fillOpacity = this .styles [0] .fillOpacity;
          return;
       }
 
@@ -2087,20 +2271,29 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          return;
       }
 
-      // inherit
-
-      this .style .fillOpacity = this .styles .at (-1) .fillOpacity;
+      if (this .double ())
+      {
+         this .style .fillOpacity = Algorithm .clamp (this .value, 0, 1);
+         return;
+      }
    },
    fillRuleStyle: function (value)
    {
+      if (value === "default")
+      {
+         this .style .fillRule = this .styles [0] .fillRule;
+         return;
+      }
+
       this .style .fillRule = value;
    },
    strokeStyle: function (value)
    {
-      if (this .urlValue ())
+      if (value === "default")
       {
-         this .style .strokeType = "URL";
-         this .style .strokeURL  = this .result [1] .trim ();
+         this .style .strokeType  = this .styles [0] .strokeType;
+         this .style .strokeColor = this .styles [0] .strokeColor;
+         this .style .strokeURL   = this .styles [0] .strokeURL;
          return;
       }
 
@@ -2112,31 +2305,29 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       if (value === "none")
       {
-         this .style .strokeType ="none";
+         this .style .strokeType = "none";
          return;
       }
 
-      if (!value .match (/^(?:inherit|unset|default)$/))
+      if (this .urlValue ())
       {
-         if (this .colorValue ())
-         {
-            this .style .strokeType  = "COLOR";
-            this .style .strokeColor = this .value .copy ();
-            return;
-         }
+         this .style .strokeType = "URL";
+         this .style .strokeURL  = this .result [1] .trim ();
+         return;
       }
 
-      // inherit
-
-      this .style .strokeType  = this .styles .at (-1) .strokeType;
-      this .style .strokeColor = this .styles .at (-1) .strokeColor;
-      this .style .strokeURL   = this .styles .at (-1) .strokeURL;
+      if (this .colorValue (this .styles .at (-1) .strokeColor))
+      {
+         this .style .strokeType  = "COLOR";
+         this .style .strokeColor = this .value .copy ();
+         return;
+      }
    },
    strokeOpacityStyle: function (value)
    {
-      if (this .double ())
+      if (value === "default")
       {
-         this .style .strokeOpacity = Algorithm .clamp (this .value, 0, 1);
+         this .style .strokeOpacity = this .styles [0] .strokeOpacity;
          return;
       }
 
@@ -2146,15 +2337,17 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          return;
       }
 
-      // inherit
-
-      this .style .strokeOpacity = this .styles .at (-1) .strokeOpacity;
+      if (this .double ())
+      {
+         this .style .strokeOpacity = Algorithm .clamp (this .value, 0, 1);
+         return;
+      }
    },
    strokeWidthStyle: function (value)
    {
-      if (this .double ())
+      if (value === "default")
       {
-         this .style .strokeWidth = this .lengthAttribute (this .value);
+         this .style .strokeWidth = this .styles [0] .strokeWidth;
          return;
       }
 
@@ -2164,15 +2357,17 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          return;
       }
 
-      // inherit
-
-      this .style .strokeWidth = this .styles .at (-1) .strokeWidth;
+      if (this .double ())
+      {
+         this .style .strokeWidth = this .lengthAttribute (this .value, 1);
+         return;
+      }
    },
    opacityStyle: function (value)
    {
-      if (this .double ())
+      if (value === "default")
       {
-         this .style .opacity = Algorithm .clamp (this .value, 0, 1) * this .styles .at (-1) .opacity;
+         this .style .opacity = this .styles [0] .opacity;
          return;
       }
 
@@ -2181,10 +2376,22 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          this .style .opacity = 0;
          return;
       }
+
+      if (this .double ())
+      {
+         this .style .opacity = Algorithm .clamp (this .value, 0, 1) * this .styles .at (-1) .opacity;
+         return;
+      }
    },
    stopColorStyle: function (value)
    {
-      if (this .colorValue ())
+      if (value === "default")
+      {
+         this .style .stopColor = this .styles [0] .stopColor;
+         return;
+      }
+
+      if (this .colorValue (Color4 .Black))
       {
          this .style .stopColor = this .value .copy ();
          return;
@@ -2192,9 +2399,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    stopOpacityStyle: function (value)
    {
-      if (this .double ())
+      if (value === "default")
       {
-         this .style .stopOpacity = Algorithm .clamp (this .value, 0, 1);
+         this .style .stopOpacity = this .styles [0] .stopOpacity;
          return;
       }
 
@@ -2203,18 +2410,22 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          this .style .stopOpacity = 0;
          return;
       }
+
+      if (this .double ())
+      {
+         this .style .stopOpacity = Algorithm .clamp (this .value, 0, 1);
+         return;
+      }
    },
    vectorEffectStyle: function (value)
    {
-      if (value !== "inherit")
+      if (value === "default")
       {
-         this .style .vectorEffect = value;
+         this .style .vectorEffect = this .styles [0] .vectorEffect;
          return;
       }
 
-      // inherit
-
-      this .style .vectorEffect = this .styles .at (-1) .vectorEffect;
+      this .style .vectorEffect = value;
    },
    parseValue: function (value)
    {
@@ -2270,12 +2481,14 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       const color = new Color4 (0, 0, 0, 0);
 
-      return function ()
+      return function (c)
       {
          if (!Grammar .color .parse (this))
             return false;
 
-         this .value = color .set (... this .convertColor (this .result [1]));
+         const defaultColor = this .cssColor (c);
+
+         this .value = color .set (... this .convertColor (this .result [1], defaultColor));
 
          return true;
       };
@@ -2284,13 +2497,20 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       return Grammar .url .parse (this);
    },
+   cssColor: function (c, a = c .a)
+   {
+      return `rgba(${c .r * 255},${c .g * 255},${c .b * 255},${a})`;
+   },
    createTransform: function (xmlElement, t = Vector2 .Zero, s = Vector2 .One)
    {
       // Determine matrix.
 
       const
-         scene  = this .getExecutionContext (),
-         m      = this .transformAttribute (xmlElement .getAttribute ("transform"));
+         scene = this .getExecutionContext (),
+         m     = this .transformAttribute (xmlElement .getAttribute ("transform"));
+
+      this .modelMatrix .push ();
+      this .modelMatrix .multLeft (Matrix4 .Matrix3 (m));
 
       m .translate (t);
       m .scale (s);
@@ -2299,7 +2519,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       const
          transformNode    = scene .createNode ("Transform"),
-         matrix           = new Matrix4 (m [0], m [1], 0, 0, m [3], m [4], 0, 0, 0, 0, 1, 0, m [6], m [7], 0, 1),
+         matrix           = Matrix4 .Matrix3 (m),
          translation      = new Vector3 (0, 0, 0),
          rotation         = new Rotation4 (),
          scale            = new Vector3 (1, 1, 1),
@@ -2316,12 +2536,18 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .idAttribute (xmlElement .getAttribute ("id"), transformNode);
 
-      // Nodes
+      // Add node to parent.
 
-      this .nodes .set (xmlElement, transformNode);
+      this .groupNodes .at (-1) .children .push (transformNode);
 
       return transformNode;
    },
+   popAll: function ()
+   {
+      this .groupNodes  .pop ();
+      this .modelMatrix .pop ();
+      this .styles      .pop ();
+   },
    createFillAppearance: function (bbox)
    {
       const
@@ -2378,10 +2604,13 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       switch (xmlElement .nodeName)
       {
          case "linearGradient":
-            return this .linearGradientElementURL (xmlElement, bbox);
+            return this .linearGradientElementUrl (xmlElement, bbox);
 
          case "radialGradient":
-            return this .radialGradientElementURL (xmlElement, bbox);
+            return this .radialGradientElementUrl (xmlElement, bbox);
+
+         case "pattern":
+            return this .patternUrl (xmlElement);
       }
    },
    createStrokeAppearance: function ()
@@ -2400,23 +2629,39 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          : this .getStokeWidth ();
 
       if (strokeWidth > 1)
-      {
-         const lineProperties = scene .createNode ("LineProperties");
-
-         appearanceNode .lineProperties       = lineProperties;
-         lineProperties .linewidthScaleFactor = strokeWidth;
-      }
+         appearanceNode .lineProperties = this .getLineProperties (strokeWidth);
 
       return appearanceNode;
    },
    getStokeWidth: function ()
    {
       const
-         modelMatrix = this .getModelMatrix (),
+         modelMatrix = this .modelMatrix .get (),
          strokeWidth = modelMatrix .multDirMatrix (new Vector3 (this .style .strokeWidth, this .style .strokeWidth, 0));
 
       return (strokeWidth .x + strokeWidth .y) / 2;
    },
+   getLineProperties: function (strokeWidth)
+   {
+      const lineProperties = this .lineProperties .get (strokeWidth);
+
+      if (lineProperties)
+      {
+         return lineProperties;
+      }
+      else
+      {
+         const
+            scene          = this .getExecutionContext (),
+            lineProperties = scene .createNode ("LineProperties");
+
+         lineProperties .linewidthScaleFactor = strokeWidth;
+
+         this .lineProperties .set (strokeWidth, lineProperties);
+
+         return lineProperties;
+      }
+   },
    createTextureProperties: function ()
    {
       const
@@ -2445,26 +2690,6 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       return texCoordNode;
    },
-   getModelMatrix: function ()
-   {
-      const modelMatrix = new Matrix4 ();
-
-      for (let i = 1; i < this .groupNodes .length; ++ i)
-      {
-         const
-            node   = this .groupNodes [i],
-            matrix = new Matrix4 ();
-
-         matrix .set (node .translation .getValue (),
-                      node .rotation .getValue (),
-                      node .scale .getValue (),
-                      node .scaleOrientation .getValue ());
-
-         modelMatrix .multLeft (matrix);
-      }
-
-      return modelMatrix;
-   },
    createTesselator: function ()
    {
       // Function called for each vertex of tessellator output.