Three.js: SVGLoader path transform issue

Created on 4 Apr 2019 · 3Comments · Source: mrdoob/three.js

I've found that SVGLoader will transform paths incorrectly if there is no Transform attribute in the Path element. If there's no parent transform, I'm not sure if that's an error too. For instance the following will not work:

    <path
         style="display:inline;fill:#ff9955;fill-opacity:1;stroke:#000000;stroke-width:1.93362367px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
         d="m -969.47313,1750.9314 -44.78237,15.5276 -49.573,33.8016 -81.3592,18.0718 -69.2048,12.3238 -39.6842,-30.2004 -23.8882,-1.2588 -33.1779,-27.9412 -13.7569,-0.086 4.0622,21.9348 25.8142,15.415 17.4954,13.6988 -26.769,-4.605 -33.162,7.835 -33.9226,-23.5084 -6.1986,-29.7134 -13.2226,1.8586 -1.052,31.8866 34.9906,27.3978 17.285,20.0762 110.2806,30.0878 129.5566,-28.3086 137.45437,-13.8378"
         id="rarm"/>

But this will:

    <path
         style="display:inline;fill:#ff9955;fill-opacity:1;stroke:#000000;stroke-width:1.93362367px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
         d="m -969.47313,1750.9314 -44.78237,15.5276 -49.573,33.8016 -81.3592,18.0718 -69.2048,12.3238 -39.6842,-30.2004 -23.8882,-1.2588 -33.1779,-27.9412 -13.7569,-0.086 4.0622,21.9348 25.8142,15.415 17.4954,13.6988 -26.769,-4.605 -33.162,7.835 -33.9226,-23.5084 -6.1986,-29.7134 -13.2226,1.8586 -1.052,31.8866 34.9906,27.3978 17.285,20.0762 110.2806,30.0878 129.5566,-28.3086 137.45437,-13.8378"
         id="rarm"
         transform="translate(0,0)"/>

The following version of getNodeTransform seems to fix the problem. I'm not sure about the exact SVG standard, if transform is required or not. Inkscape leaves it out frequently.

    function getNodeTransform( node ) {

            var t = true;
            if ( ! node.hasAttribute( 'transform' ) ) {
 //             return null;
                t = false;
            }
            let transform;
            if (t)
                transform = parseNodeTransform( node );
            else
                transform = new THREE.Matrix3;


            if ( transform ) {

                if ( transformStack.length > 0 ) {
                    transform.premultiply( transformStack[ transformStack.length - 1 ] );
                }

                currentTransform.copy( transform );
                transformStack.push( transform );

            }

            return transform;

        }

Thanks.

Source