вращая стрелку SVG вокруг своей средней точки с Javascript

Question

Я пытаюсь повернуть элемент SVG (стрелку) вокруг его средней точки. Но я не могу заставить его вращаться вокруг его средней точки.

Каждый раз, когда я поворачиваю SVG, стрелка перемещается в другое место на странице. Я хочу, чтобы он вращался, но оставался на том же месте, поэтому стрелка указывает в другом направлении.

стрелка используется для указания направления ветра на карте Нидерландов, я хочу изменить это на другое направление, если день меняется ..

Это мой HTMl код:

<p>
        <label for="dagen">Kies de dag:</label>
        <select id="dagen" name="dagen" onchange="kaartGrades()">
            <option>Kies een dag</option>
            <option value="vandaag">Vandaag</option>
            <option value="morgen">Morgen</option>
            <option value="overmorgen">Overmorgen</option>
        </select>
    </p>
    <div class="weer_kaart">
        <img id="kaart" src="picto/kaart-nederland-jan-hi.png" alt="nlkaart" height="500px">

        <svg style="height: 100%; width: 100%;">
            <text id="s1" x="175" y="200" fill="red"></text>
            <text id="s2" x="310" y="135" fill="red"></text>
            <text id="s3" x="150" y="300" fill="red"></text>
            <text id="s4" x="300" y="280" fill="red"></text>
            <text id="s5" x="200" y="370" fill="red"></text>
        </svg>

        <svg id="pijl" viewBox="0 0 100 100">
             
            <defs>
                   
                <marker id="point" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5"
                        orient="auto-start-reverse">
                         
                    <path d="M 0 0 L 10 5 L 0 10 z"/>
                       
                </marker>

                   
                 
            </defs>


             
            <polyline id="arrow" points="10,20 20,30" fill="none" stroke="black"
                      marker-start="url(#point)" display="block"></polyline>


        </svg>



    </div>

И это javascript, который я использую, чтобы повернуть его на другой вариант:

function kaartGrades() {
    const x = document.getElementById('dagen').value;
    const pijl = document.getElementById("pijl");

    // for the info of today
    if (x === "vandaag") {
       for (let i = 0; i < vandaagList.length; i++){
           document.getElementById("s" + (i + 1)).innerHTML = vandaagList[i];}

        pijl.style.display = "block";

    }
    // for the info of tomorrow
    else if (x === "morgen") {
        for (let i = 0; i < morgenList.length; i++){
            document.getElementById("s" + (i + 1)).innerHTML = morgenList[i];}

       pijl.style.display = "block";
       pijl.setAttribute("transform", "rotate(180 50 50)");
    }
    // for the info after tomorrow
    else if (x === "overmorgen") {
            for (let i = 0; i < overmorgenList.length; i++){
                document.getElementById("s" + ( i + 1)).innerHTML = overmorgenList[i];}

        pijl.setAttribute("transform", "rotate(450 50 50)");
        pijl.style.display = "block";

    }
    else{
        pijl.style.display = "none";
    }

}

Answer 1

Не уверен, как выглядит ваш svg, но добавление этих свойств может помочь

transform-origin:center;
transform-box:fill-box;

Так что в вашем случае добавьте эти дополнительные строки в ваш код

pijl.setAttribute("transform-origin", "center");
pijl.setAttribute("transform-box", "fill-box");