Get wrong reslut while calculate d path with transform matrix to a new d path, how to solve it?

Question

    document.getElementById('green-1').setAttribute('d', computeFromMatrix(document.getElementById('red-1')))
    document.getElementById('green-2').setAttribute('d', computeFromMatrix(document.getElementById('red-2')))
    document.getElementById('green-3').setAttribute('d', computeFromMatrix(document.getElementById('red-3')))

    /**
     * @param dPath M434.38 269.75L452.79 321.98
     * @return {(*|number)[][]} [['M',434.38,269.75,],['L',452.79,321.98]]
     */
    function line2List(dPath) {
        const [a, b, c, d, e, f] = dPath.replace(/[a-zA-Z]/img, function (a, b, c) {
            return ' ' + arguments[0] + ' '
        }).split(' ').filter(str => !!str)
        return [[a, Number(b), Number(c)], [d, Number(e), Number(f)]]
    }

    function computeFromMatrix($g) {
        const standardPathList = line2List($g.querySelector('path').getAttribute('d'))
        const [a, b, c, d, e, f]  = $g.getAttribute('transform').replace(/[a-zA-Z()]/img, '').split(',').map(num => Number(num))
        for (let i = standardPathList.length - 1; i >= 0; i--) {
            standardPathList[i][1] = a * standardPathList[i][1] + c * standardPathList[i][2] + e
            standardPathList[i][2] = b * standardPathList[i][1] + d * standardPathList[i][2] + f
        }
        return standardPathList.map(list => list.join(' ')).join('')
    }

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
    svg {
        background-color: pink;
        overflow: visible;
    }

</style>
<svg>
    <!--    red lines   -->
    <g>
        <g id="red-1" transform="matrix(-0.9969744, 0.07773056, 0.07773056, 0.9969744, 427.8247, -302.584747)">
            <path stroke-width="4.5" stroke="#FF3300" d="M434.38 269.75L452.79 321.98"/>
        </g>
        <g id="red-2" transform="matrix(0.9969744, -0.07773056, 0.07773056, 0.9969744, -457.071747, -231.950928)">
            <path stroke-width="4.5" stroke="#FF3300" d="M453.33 268.11L476.42 335.98"/>
        </g>
        <g id="red-3" transform="matrix(-0.9969744, 0.07773056, -0.07773056, -0.9969744, 504.632568, 352.021851)">
            <path stroke-width="4.5" stroke="#FF3300" d="M436.98 320.98L478.48 336.62"/>
        </g>
        <!--    green lines -->
        <g><path id="green-1" stroke-width="4.5" stroke="green"/></g>
        <g><path id="green-2" stroke-width="4.5" stroke="green"/></g>
        <g><path id="green-3" stroke-width="4.5" stroke="green"/></g>
    </g>
</svg>
</body>
</html>

have a preview image from html code

In html code The red line is made by matrix and path.

The green line only made by path ,and the path is calculated by red line's data,including matrix and path.

This is the formula i use

I want to make calculate a new d path from existed transform matrix and old path .

Get wrong reslut while calculate d path with transform matrix to a new d path, how to solve it?

0 Answers0