Подскажите, как я могу "вводить" динамически изменять координаты атрибута "d" в теге "path" в "svg"

Question

Подскажите, как я могу "вводить" динамически изменять координаты атрибута "d" в теге "path" в "svg" Используя ввод и javascript?

Пожалуйста, скажите мне на примере как реализовать эту функциональность.

Есть небольшой конструктор, в котором я выбираю из атрибута D все номера координат в новом массиве без букв. Но после изменений, скажем, как я могу вставить их обратно правильно и с буквами уже ???

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250.026" height="241.209" viewBox="0 0 250.026 241.209">
    <defs>
        <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
            <stop offset="0" stop-color="#f1f1f1"/>
            <stop offset="1" stop-color="#e1e1e1"/>
        </linearGradient>
        <linearGradient id="linear-gradient-3" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
            <stop offset="0" stop-color="#e5e5e5"/>
            <stop offset="1" stop-color="#c7c7c7"/>
        </linearGradient>
    </defs>
    <g id="_02_U-Profil" data-name="02_U-Profil" transform="translate(-92.04 -125.791)">
        <path
            id="Path_3"
            data-name="Path 3"
            d="M 180.0 433.0 V 589.0 L 259.0 510.0 v -156 Z"
            transform="translate(-86.652 -227.479)"
            stroke="#b1b1b1"
            stroke-width="1"
            fill="url(#linear-gradient)"
        />
        <path
            id="Path_5"
            data-name="Path 5"
            d="M 260.0 438.0 l 167.0.0 -80.0 80.0 H 180.0 Z"
            transform="translate(-87 -156.769)"
            stroke="#b1b1b1"
            stroke-width="1"
            fill="url(#linear-gradient)"
        />
        <path
            id="Path_4"
            data-name="Path 4"
            d="M 180.0 433.0 V 589.0 L 259.0 510.0 v -156 Z"
            transform="translate(80.675 -227.479)"
            stroke="#b1b1b1"
            stroke-width="1"
            fill="url(#linear-gradient-3)"
        />
    </g>
</svg>


<div class="path-control">
    <label>
        <input type="number" value="180.0" />
    </label>
    <label>
        <input type="number" value="433.0" />
    </label>
    <label>
        <input type="number" value="589.0" />
    </label>
    <label>
        <input type="number" value="259.0" />
    </label>
    <label>
        <input type="number" value="510.0" />
    </label>
    <label>
        <input type="number" value="-156" />
    </label>
</div>

<script type="text/javascript">
    let getSvgPathController = class getSvgPathController {
        constructor( element, { childElement }) {
            const doc = document,
                svgElement = doc.querySelector( element ),
                svgChildElement = svgElement.children[ childElement ],
                svgPath = svgChildElement.getAttribute( "d" ).split( " " ),
                svgPathNoLettersArray = [];
            svgPath.forEach( item => {
                if ( item !== "M" && item !== "H" && item !== "L" && item !== "l" && item !== "V" && item !== "v" && item !== "Z" ) {
                    svgPathNoLettersArray.push( item );
                }
            });
            console.log( svgPathNoLettersArray );
        }
    };
    new getSvgPathController( "#_02_U-Profil", {
        childElement: 0
    })
</script>