javascript - 使用 Javascript 围绕中点旋转 svg 箭头

问题描述

我正在尝试围绕其中点旋转 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";
    }

}

标签： javascripthtmlcsssvg

不确定您的 svg 是什么样的，但添加这些属性可能会有所帮助

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

因此，在您的情况下，将这些额外的行添加到您的代码中

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

javascript - 使用 Javascript 围绕中点旋转 svg 箭头

问题描述

解决方案

推荐阅读