x_ite 8.6.3 → 8.6.5

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,17 @@ 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 .nodes          = 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",
@@ -143,7 +143,7 @@ function SVGParser (scene)
       fillURL: "",
       fillOpacity: 1,
       fillRule: "nonzero",
-      strokeType: "NONE",
+      strokeType: "none",
       strokeColor: Color4 .Black,
       strokeURL: "",
       strokeOpacity: 1,
@@ -151,7 +151,44 @@ function SVGParser (scene)
       opacity: 1,
       stopColor: Color4 .Black,
       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),
@@ -260,17 +297,31 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       // Get attributes of svg element.
 
       const
-         defaultWidth   = this .lengthAttribute (xmlElement .getAttribute ("width", 100)),
-         defaultHeight  = this .lengthAttribute (xmlElement .getAttribute ("height", 100)),
-         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"
+
+         const
+            r  = width / height,
+            rv = viewBox [2] / viewBox [3];
+
+         if (rv > r)
+            viewBox [3] += viewBox [2] / r - viewBox [3];
+         else
+            viewBox [2] += viewBox [3] * r - viewBox [2];
+      }
 
       // Create viewpoint.
 
       const
-         viewpoint = scene .createNode ("OrthoViewpoint",),
+         viewpoint = scene .createNode ("OrthoViewpoint"),
          x         =  (viewBox .x + width  / 2) * PIXEL,
          y         = -(viewBox .y + height / 2) * PIXEL;
 
@@ -374,10 +425,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));
 
@@ -385,8 +436,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .element (usedElement);
 
-      this .styles     .pop ();
-      this .groupNodes .pop ();
+      this .groupNodes  .pop ();
+      this .modelMatrix .pop ();
+      this .styles      .pop ();
 
       // Add node.
 
@@ -409,8 +461,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .elements (xmlElement);
 
-      this .styles     .pop ();
-      this .groupNodes .pop ();
+      this .groupNodes  .pop ();
+      this .modelMatrix .pop ();
+      this .styles      .pop ();
 
       // Add node.
 
@@ -439,8 +492,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .elements (xmlElement);
 
-      this .styles     .pop ();
-      this .groupNodes .pop ();
+      this .groupNodes  .pop ();
+      this .modelMatrix .pop ();
+      this .styles      .pop ();
 
       // Add node.
 
@@ -481,75 +535,119 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .elements (xmlElement);
 
-      this .groupNodes .pop ();
-      this .styles     .pop ();
+      this .groupNodes  .pop ();
+      this .modelMatrix .pop ();
+      this .styles      .pop ();
 
       this .groupNodes .at (-1) .children .push (transformNode);
    },
    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 .fillType !== "none")
+         {
+            const
+               shapeNode     = scene .createNode ("Shape"),
+               rectangleNode = scene .createNode ("Rectangle2D");
+
+            shapeNode .appearance = this .createFillAppearance (bbox);
+            shapeNode .geometry   = rectangleNode;
+            rectangleNode .solid  = this .solid;
+            rectangleNode .size   = size;
+
+            transformNode .children .push (shapeNode);
+         }
+
+         if (this .style .strokeType !== "none")
+         {
+            const
+               shapeNode     = scene .createNode ("Shape"),
+               polylineNode  = scene .createNode ("Polyline2D"),
+               width1_2      = width / 2,
+               height1_2     = height / 2;
+
+            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 (this .style .strokeType !== "NONE")
+            transformNode .children .push (shapeNode);
+         }
+
+         this .groupNodes  .pop ();
+         this .modelMatrix .pop ();
+         this .styles      .pop ();
+
+         this .groupNodes .at (-1) .children .push (transformNode);
+      }
+      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 ([ ], { index: 0, 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)
    {
@@ -561,8 +659,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
@@ -574,7 +672,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       // Create nodes.
 
-      if (this .style .fillType !== "NONE")
+      if (this .style .fillType !== "none")
       {
          const
             shapeNode = scene .createNode ("Shape"),
@@ -588,7 +686,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          transformNode .children .push (shapeNode);
       }
 
-      if (this .style .strokeType !== "NONE")
+      if (this .style .strokeType !== "none")
       {
          const
             shapeNode  = scene .createNode ("Shape"),
@@ -601,8 +699,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          transformNode .children .push (shapeNode);
       }
 
-      this .groupNodes .pop ();
-      this .styles     .pop ();
+      this .groupNodes  .pop ();
+      this .modelMatrix .pop ();
+      this .styles      .pop ();
 
       this .groupNodes .at (-1) .children .push (transformNode);
    },
@@ -616,10 +715,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 (),
@@ -631,7 +730,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       // Create nodes.
 
-      if (this .style .fillType !== "NONE")
+      if (this .style .fillType !== "none")
       {
          const
             shapeNode = scene .createNode ("Shape"),
@@ -645,7 +744,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          transformNode .children .push (shapeNode);
       }
 
-      if (this .style .strokeType !== "NONE")
+      if (this .style .strokeType !== "none")
       {
          const
             shapeNode  = scene .createNode ("Shape"),
@@ -658,8 +757,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          transformNode .children .push (shapeNode);
       }
 
-      this .groupNodes .pop ();
-      this .styles     .pop ();
+      this .groupNodes  .pop ();
+      this .modelMatrix .pop ();
+      this .styles      .pop ();
 
       this .groupNodes .at (-1) .children .push (transformNode);
    },
@@ -669,13 +769,18 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    imageElement: 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"),
          href   = xmlElement .getAttribute ("xlink:href");
 
       const
@@ -702,74 +807,37 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       transformNode .children .push (shapeNode);
 
-      this .groupNodes .pop ();
+      this .groupNodes  .pop ();
+      this .modelMatrix .pop ();
+      this .styles      .pop ();
+
       this .groupNodes .at (-1) .children .push (transformNode);
    },
-   polylineElement: function (xmlElement, closed = false)
+   polylineElement: function (xmlElement)
    {
+      // Get points.
+
       const points = Object .assign ([ ], { index: 0 });
 
       if (!this .pointsAttribute (xmlElement .getAttribute ("points"), points))
          return;
 
-      // Determine style.
-
-      if (!this .styleAttributes (xmlElement))
-         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);
-      }
+      this .pathLikeElement (xmlElement, [points]);
+   },
+   polygonElement: function (xmlElement)
+   {
+      // Get points.
 
-      if (this .style .strokeType !== "NONE")
-      {
-         const
-            shapeNode    = scene .createNode ("Shape"),
-            geometryNode = scene .createNode ("IndexedLineSet");
+      const points = Object .assign ([ ], { index: 0, closed: true });
 
-         shapeNode .appearance    = this .createStrokeAppearance ();
-         shapeNode .geometry      = geometryNode;
-         geometryNode .coordIndex = [... points .keys (), ... (closed ? [points [0]] : [ ]), -1];
-         geometryNode .coord      = coordinateNode;
-
-         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)
    {
@@ -780,6 +848,12 @@ 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))
@@ -804,7 +878,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       for (const points of contours)
          coordinateNode .point .push (... points);
 
-      if (this .style .fillType !== "NONE")
+      if (this .style .fillType !== "none")
       {
          const
             shapeNode    = scene .createNode ("Shape"),
@@ -820,47 +894,49 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          transformNode .children .push (shapeNode);
       }
 
-      if (this .style .strokeType !== "NONE")
+      if (this .style .strokeType !== "none")
       {
          const
             shapeNode    = scene .createNode ("Shape"),
             geometryNode = scene .createNode ("IndexedLineSet");
 
-         shapeNode .appearance = this .createStrokeAppearance ();
-         shapeNode .geometry   = geometryNode;
-         geometryNode .coord   = coordinateNode;
+         shapeNode .appearance    = this .createStrokeAppearance ();
+         shapeNode .geometry      = geometryNode;
+         geometryNode .coord      = coordinateNode;
+
+         // Create contour indices.
+
+         const indices = geometryNode .coordIndex;
 
          for (const points of contours)
          {
             for (const i of points .keys ())
-               geometryNode .coordIndex .push (points .index + i);
+               indices .push (points .index + i);
 
             if (points .closed)
-               geometryNode .coordIndex .push (points .index);
+               indices .push (points .index);
 
-            geometryNode .coordIndex .push (-1);
+            indices .push (-1);
          }
 
          transformNode .children .push (shapeNode);
       }
 
-      this .groupNodes .pop ();
-      this .styles     .pop ();
+      this .groupNodes  .pop ();
+      this .modelMatrix .pop ();
+      this .styles      .pop ();
 
       this .groupNodes .at (-1) .children .push (transformNode);
    },
-   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 .transform, bbox, g .units);
+      return this .drawGradient (gradient, g, bbox);
    },
-   linearGradientElement: function (xmlElement, gradient)
+   linearGradientElement: function (xmlElement, bbox, gradient)
    {
       if (xmlElement .nodeName !== "linearGradient")
          return;
@@ -870,17 +946,29 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       const refElement = this .hrefAttribute (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)
@@ -888,38 +976,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 .transform, bbox, g .units);
+      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"));
 
       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)
@@ -927,7 +1024,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       return gradient;
    },
-   gradientElement: function (xmlElement, gradient)
+   gradientElement: function (xmlElement, bbox, gradient)
    {
       if (!xmlElement)
          return;
@@ -935,9 +1032,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)
@@ -952,26 +1049,75 @@ 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]);
 
       this .styles .pop ();
    },
-   drawGradient: function (gradient, transform, bbox, units)
+   drawGradient: function (gradient, g, bbox)
    {
+      // Add color stops.
+
+      const spreadMatrix = new Matrix3 ();
+
+      switch (g .spreadMethod)
+      {
+         default: // pad
+         {
+            for (const [o, c, a] of g .stops)
+               gradient .addColorStop (o, this .css (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));
+            }
+
+            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));
+            }
+
+            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));
 
-      if (units === "userSpaceOnUse")
+      if (g .units === "userSpaceOnUse")
          m .multLeft (Matrix3 .inverse (bbox .matrix));
       else
          m .multLeft (new Matrix3 (2, 0, 0, 0, 2, 0, -1, -1, 1));
 
-      m .multLeft (transform);
+      m .multLeft (g .transform);
+      m .multLeft (spreadMatrix);
 
       // Paint.
 
@@ -979,8 +1125,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 ();
@@ -988,6 +1134,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)
@@ -1042,7 +1192,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.
 
@@ -1085,6 +1235,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;
+               }
             }
          }
 
@@ -1350,7 +1517,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;
@@ -1411,7 +1578,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;
@@ -1477,7 +1644,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;
@@ -1554,7 +1721,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;
@@ -1626,7 +1793,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;
@@ -1764,16 +1931,20 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                   {
                      if (this .double ())
                      {
-                        const ty = this .value;
+                        var ty = this .value;
+                     }
+                  }
+                  else
+                  {
+                     var ty = 0;
+                  }
 
-                        this .whitespaces ();
+                  this .whitespaces ();
 
-                        if (Grammar .closeParenthesis .parse (this))
-                        {
-                           matrix .translate (new Vector2 (tx, ty));
-                           continue;
-                        }
-                     }
+                  if (Grammar .closeParenthesis .parse (this))
+                  {
+                     matrix .translate (new Vector2 (tx, ty));
+                     continue;
                   }
                }
             }
@@ -1840,16 +2011,20 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                   {
                      if (this .double ())
                      {
-                        const sy = this .value;
+                        var sy = this .value;
+                     }
+                  }
+                  else
+                  {
+                     var sy = sx;
+                  }
 
-                        this .whitespaces ();
+                  this .whitespaces ();
 
-                        if (Grammar .closeParenthesis .parse (this))
-                        {
-                           matrix .scale (new Vector2 (sx, sy));
-                           continue;
-                        }
-                     }
+                  if (Grammar .closeParenthesis .parse (this))
+                  {
+                     matrix .scale (new Vector2 (sx, sy));
+                     continue;
                   }
                }
             }
@@ -1900,44 +2075,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",
-      ];
-
-      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 [0]);
 
-         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)
@@ -1991,6 +2146,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          case "stop-opacity":
             this .stopOpacityStyle (value);
             break;
+         case "vector-effect":
+            this .vectorEffectStyle (value);
+            break;
       }
    },
    displayStyle: function (value)
@@ -2020,19 +2178,19 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       if (value === "transparent")
       {
-         this .style .fillType = "NONE";
+         this .style .fillType = "none";
          return;
       }
 
       if (value === "none")
       {
-         this .style .fillType ="NONE";
+         this .style .fillType = "none";
          return;
       }
 
       if (!value .match (/^(?:inherit|unset|default)$/))
       {
-         if (this .colorValue ())
+         if (this .colorValue (this .styles .at (-1) .fillColor))
          {
             this .style .fillType  = "COLOR";
             this .style .fillColor = this .value .copy ();
@@ -2079,19 +2237,19 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       if (value === "transparent")
       {
-         this .style .strokeType = "NONE";
+         this .style .strokeType = "none";
          return;
       }
 
       if (value === "none")
       {
-         this .style .strokeType ="NONE";
+         this .style .strokeType = "none";
          return;
       }
 
       if (!value .match (/^(?:inherit|unset|default)$/))
       {
-         if (this .colorValue ())
+         if (this .colorValue (this .styles .at (-1) .strokeColor))
          {
             this .style .strokeType  = "COLOR";
             this .style .strokeColor = this .value .copy ();
@@ -2127,7 +2285,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       if (this .double ())
       {
-         this .style .strokeWidth = this .value / (1000 * PIXEL);
+         this .style .strokeWidth = this .lengthAttribute (this .value, 1);
          return;
       }
 
@@ -2157,7 +2315,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    stopColorStyle: function (value)
    {
-      if (this .colorValue ())
+      if (this .colorValue (Color4 .Black))
       {
          this .style .stopColor = this .value .copy ();
          return;
@@ -2177,6 +2335,18 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          return;
       }
    },
+   vectorEffectStyle: function (value)
+   {
+      if (value !== "inherit")
+      {
+         this .style .vectorEffect = value;
+         return;
+      }
+
+      // inherit
+
+      this .style .vectorEffect = this .styles .at (-1) .vectorEffect;
+   },
    parseValue: function (value)
    {
       this .input     = value;
@@ -2231,12 +2401,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 .css (c);
+
+         this .value = color .set (... this .convertColor (this .result [1], defaultColor));
 
          return true;
       };
@@ -2245,13 +2417,20 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       return Grammar .url .parse (this);
    },
+   css: 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);
@@ -2260,7 +2439,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),
@@ -2291,7 +2470,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       switch (this .style .fillType)
       {
-         case "NONE":
+         case "none":
          {
             return null;
          }
@@ -2339,10 +2518,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 ()
@@ -2356,16 +2538,44 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       materialNode .emissiveColor = new Color3 (... this .style .strokeColor);
       materialNode .transparency  = 1 - this .style .strokeOpacity * this .style .opacity;
 
-      if (this .style .strokeWidth !== 1)
-      {
-         const lineProperties = scene .createNode ("LineProperties");
+      const strokeWidth = this .vectorEffect === "non-scaling-stroke"
+         ? this .style .strokeWidth
+         : this .getStokeWidth ();
 
-         appearanceNode .lineProperties       = lineProperties;
-         lineProperties .linewidthScaleFactor = this .style .strokeWidth;
-      }
+      if (strokeWidth > 1)
+         appearanceNode .lineProperties = this .getLineProperties (strokeWidth);
 
       return appearanceNode;
    },
+   getStokeWidth: function ()
+   {
+      const
+         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