x_ite 8.6.5 → 8.6.6

package/src/x_ite/Parser/SVGParser.js

@@ -128,13 +128,14 @@ function SVGParser (scene)
 
    // Globals
 
-   this .viewBox        = new Vector4 (0, 0, 100, 100);
-   this .modelMatrix    = new MatrixStack (Matrix4);
-   this .nodes          = new Map ();
-   this .lineProperties = new Map ();
-   this .tessy          = this .createTesselator ();
-   this .canvas         = document .createElement ("canvas");
-   this .context        = this .canvas .getContext ("2d");
+   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",
@@ -366,9 +367,6 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    element: function (xmlElement)
    {
-      if (this .used (xmlElement))
-			return;
-
       switch (xmlElement .nodeName)
       {
          case "use":
@@ -397,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;
@@ -436,13 +423,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .element (usedElement);
 
-      this .groupNodes  .pop ();
-      this .modelMatrix .pop ();
-      this .styles      .pop ();
-
-      // Add node.
-
-      this .groupNodes .at (-1) .children .push (transformNode);
+      this .popAll ();
    },
    gElement: function (xmlElement)
    {
@@ -461,13 +442,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .elements (xmlElement);
 
-      this .groupNodes  .pop ();
-      this .modelMatrix .pop ();
-      this .styles      .pop ();
-
-      // Add node.
-
-      this .groupNodes .at (-1) .children .push (transformNode);
+      this .popAll ();
    },
    switchElement: function (xmlElement)
    {
@@ -492,13 +467,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .elements (xmlElement);
 
-      this .groupNodes  .pop ();
-      this .modelMatrix .pop ();
-      this .styles      .pop ();
-
-      // Add node.
-
-      this .groupNodes .at (-1) .children .push (transformNode);
+      this .popAll ();
    },
    aElement: function (xmlElement)
    {
@@ -510,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.
@@ -535,11 +504,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .elements (xmlElement);
 
-      this .groupNodes  .pop ();
-      this .modelMatrix .pop ();
-      this .styles      .pop ();
-
-      this .groupNodes .at (-1) .children .push (transformNode);
+      this .popAll ();
    },
    rectElement: function (xmlElement)
    {
@@ -579,41 +544,60 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          {
             const
                shapeNode     = scene .createNode ("Shape"),
-               rectangleNode = scene .createNode ("Rectangle2D");
+               rectangleNode = this .fillGeometries .get (xmlElement);
 
+            transformNode .children .push (shapeNode);
             shapeNode .appearance = this .createFillAppearance (bbox);
-            shapeNode .geometry   = rectangleNode;
-            rectangleNode .solid  = this .solid;
-            rectangleNode .size   = size;
 
-            transformNode .children .push (shapeNode);
+            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  = scene .createNode ("Polyline2D"),
-               width1_2      = width / 2,
-               height1_2     = height / 2;
+               shapeNode    = scene .createNode ("Shape"),
+               polylineNode = this .strokeGeometries .get (xmlElement);
 
+            transformNode .children .push (shapeNode);
             shapeNode .appearance = this .createStrokeAppearance ();
-            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];
+            if (polylineNode)
+            {
+               shapeNode .geometry = polylineNode;
+            }
+            else
+            {
+               const
+                  polylineNode = scene .createNode ("Polyline2D"),
+                  width1_2     = width / 2,
+                  height1_2    = height / 2;
+
+               this .strokeGeometries .set (xmlElement, polylineNode);
 
-            transformNode .children .push (shapeNode);
-         }
+               shapeNode .geometry = polylineNode;
 
-         this .groupNodes  .pop ();
-         this .modelMatrix .pop ();
-         this .styles      .pop ();
+               polylineNode .lineSegments = [ width1_2,  height1_2,
+                                             -width1_2,  height1_2,
+                                             -width1_2, -height1_2,
+                                              width1_2, -height1_2,
+                                              width1_2,  height1_2];
+            }
+         }
 
-         this .groupNodes .at (-1) .children .push (transformNode);
+         this .popAll ();
       }
       else
       {
@@ -628,7 +612,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          const
             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 ([ ], { index: 0, closed: true });
+            points   = Object .assign ([ ], { closed: true });
 
          for (let c = 0; c < 4; ++ c)
          {
@@ -676,34 +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 .modelMatrix .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)
    {
@@ -734,34 +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 .modelMatrix .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)
    {
@@ -769,55 +789,61 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    imageElement: function (xmlElement)
    {
-      // Determine style.
+      const transformNode = this .fillGeometries .get (xmlElement);
 
-      if (!this .styleAttributes (xmlElement))
-         return;
-
-      // Create Transform node.
+      if (transformNode)
+      {
+         this .groupNodes .at (-1) .children .push (transformNode);
+      }
+      else
+      {
+         // Determine style.
 
-      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 ("xlink:href");
+         if (!this .styleAttributes (xmlElement))
+            return;
 
-      const
-         scene         = this .getExecutionContext (),
-         transformNode = this .createTransform (xmlElement, new Vector2 (x + width / 2, y + height / 2), new Vector2 (1, -1));
+         // Create Transform node.
 
-      this .groupNodes .push (transformNode);
+         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");
 
-      // Create nodes.
+         const
+            scene         = this .getExecutionContext (),
+            transformNode = this .createTransform (xmlElement, new Vector2 (x + width / 2, y + height / 2), new Vector2 (1, -1));
 
-      const
-         shapeNode      = scene .createNode ("Shape"),
-         appearanceNode = scene .createNode ("Appearance"),
-         textureNode    = scene .createNode ("ImageTexture"),
-         rectangleNode  = scene .createNode ("Rectangle2D");
+         this .fillGeometries .set (xmlElement, transformNode);
+         this .groupNodes .push (transformNode);
 
-      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);
+         // Create nodes.
 
-      transformNode .children .push (shapeNode);
+         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);
 
-      this .groupNodes  .pop ();
-      this .modelMatrix .pop ();
-      this .styles      .pop ();
+         transformNode .children .push (shapeNode);
 
-      this .groupNodes .at (-1) .children .push (transformNode);
+         this .popAll ();
+      }
    },
    polylineElement: function (xmlElement)
    {
       // Get points.
 
-      const points = Object .assign ([ ], { index: 0 });
+      const points = [ ];
 
       if (!this .pointsAttribute (xmlElement .getAttribute ("points"), points))
          return;
@@ -830,7 +856,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       // Get points.
 
-      const points = Object .assign ([ ], { index: 0, closed: true });
+      const points = Object .assign ([ ], { closed: true });
 
       if (!this .pointsAttribute (xmlElement .getAttribute ("points"), points))
          return;
@@ -859,6 +885,30 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       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
@@ -882,51 +932,69 @@ 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);
 
-         shapeNode .appearance    = this .createStrokeAppearance ();
-         shapeNode .geometry      = geometryNode;
-         geometryNode .coord      = coordinateNode;
+         transformNode .children .push (shapeNode);
+         shapeNode .appearance = this .createStrokeAppearance ();
 
-         // Create contour indices.
+         if (geometryNode)
+         {
+            shapeNode .geometry = geometryNode;
+         }
+         else
+         {
+            const geometryNode = scene .createNode ("IndexedLineSet");
 
-         const indices = geometryNode .coordIndex;
+            this .strokeGeometries .set (xmlElement, geometryNode);
 
-         for (const points of contours)
-         {
-            for (const i of points .keys ())
-               indices .push (points .index + i);
+            shapeNode .geometry = geometryNode;
+            geometryNode .coord = coordinateNode;
 
-            if (points .closed)
-               indices .push (points .index);
+            // Create contour indices.
 
-            indices .push (-1);
-         }
+            const indices = geometryNode .coordIndex;
 
-         transformNode .children .push (shapeNode);
-      }
+            for (const points of contours)
+            {
+               for (const i of points .keys ())
+                  indices .push (points .index + i);
 
-      this .groupNodes  .pop ();
-      this .modelMatrix .pop ();
-      this .styles      .pop ();
+               if (points .closed)
+                  indices .push (points .index);
 
-      this .groupNodes .at (-1) .children .push (transformNode);
+               indices .push (-1);
+            }
+         }
+      }
+
+      this .popAll ();
    },
    linearGradientElementUrl: function (xmlElement, bbox)
    {
@@ -943,7 +1011,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       // 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, bbox, gradient);
@@ -988,7 +1056,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       // 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, bbox, gradient);
@@ -1062,41 +1130,37 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       // Add color stops.
 
-      const spreadMatrix = new Matrix3 ();
-
       switch (g .spreadMethod)
       {
          default: // pad
          {
+            g .spreadMatrix .identity ();
+
             for (const [o, c, a] of g .stops)
-               gradient .addColorStop (o, this .css (c, a));
+               gradient .addColorStop (o, this .cssColor (c, a));
 
             break;
          }
          case "repeat":
          {
-            spreadMatrix .assign (g .spreadMatrix);
-
             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 .css (c, a));
+                  gradient .addColorStop (s + o / SPREAD, this .cssColor (c, a));
             }
 
             break;
          }
          case "reflect":
          {
-            spreadMatrix .assign (g .spreadMatrix);
-
             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 .css (c, a));
+                  gradient .addColorStop (s + (i % 2 ? 1 - o : o) / SPREAD, this .cssColor (c, a));
             }
 
             break;
@@ -1117,7 +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 (spreadMatrix);
+      m .multLeft (g .spreadMatrix);
 
       // Paint.
 
@@ -1319,7 +1383,6 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       let
          points   = [ ],
-         index    = 0,
          previous = "",
          command  = "",
          relative = false,
@@ -1347,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 = [ ];
 
@@ -1823,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 = [ ];
@@ -1839,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;
    },
@@ -2077,7 +2134,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    styleAttributes: function (xmlElement)
    {
-      const style = Object .assign ({ }, this .styles [0]);
+      const style = Object .assign ({ }, this .styles .at (-1));
 
       if (this .style .display === "none")
          return false;
@@ -2112,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)
@@ -2153,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;
       }
 
@@ -2169,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;
       }
 
@@ -2188,27 +2243,25 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          return;
       }
 
-      if (!value .match (/^(?:inherit|unset|default)$/))
+      if (this .urlValue ())
       {
-         if (this .colorValue (this .styles .at (-1) .fillColor))
-         {
-            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;
       }
 
@@ -2218,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;
       }
 
@@ -2247,27 +2309,25 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          return;
       }
 
-      if (!value .match (/^(?:inherit|unset|default)$/))
+      if (this .urlValue ())
       {
-         if (this .colorValue (this .styles .at (-1) .strokeColor))
-         {
-            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;
       }
 
@@ -2277,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, 1);
+         this .style .strokeWidth = this .styles [0] .strokeWidth;
          return;
       }
 
@@ -2295,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;
       }
 
@@ -2312,9 +2376,21 @@ 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 (value === "default")
+      {
+         this .style .stopColor = this .styles [0] .stopColor;
+         return;
+      }
+
       if (this .colorValue (Color4 .Black))
       {
          this .style .stopColor = this .value .copy ();
@@ -2323,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;
       }
 
@@ -2334,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)
    {
@@ -2406,7 +2486,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          if (!Grammar .color .parse (this))
             return false;
 
-         const defaultColor = this .css (c);
+         const defaultColor = this .cssColor (c);
 
          this .value = color .set (... this .convertColor (this .result [1], defaultColor));
 
@@ -2417,7 +2497,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       return Grammar .url .parse (this);
    },
-   css: function (c, a = c .a)
+   cssColor: function (c, a = c .a)
    {
       return `rgba(${c .r * 255},${c .g * 255},${c .b * 255},${a})`;
    },
@@ -2456,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