無法動態調整多邊形的座標

我想使圖像顯示爲六角形。因此我使用svg。無法動態調整多邊形的座標

<svg id="hexagon"> 
     <defs> 
     <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox"> 
      <image height="1" width="1" preserveAspectRatio="none" xlink:href="https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg"/> 
     </pattern> 
     </defs> 
     <polygon fill="url(#pattern1)" points=" 121.25 0 242.5 100 242.5 300 121.25 400 121.25 400 0 300 0 100"/> 
    </svg>

現在我想根據鼠標在屏幕上的位置來操縱這個svg的座標。所以如果鼠標光標在屏幕的右側，六角形的第一個點（上面的那個）也應該在屏幕的右邊緣。否則，如果鼠標光標位於屏幕的左側，則六角形的第一個點應位於屏幕的左側邊緣。這個高點的位置應該根據鼠標光標的位置動態變化。

爲了測試我想這一個訪問點，但它沒有工作：

<script> 
    var polygon = document.getElementById("hexagon"); 
    polygon.setAttribute("points", "0,0 100,100 200,200"); 
</script>

我做了什麼錯？

來源

2016-06-11 R. Hemudu

[SVG的多邊形元素工作]的可能的複製（http://stackoverflow.com/questions/2152161/working-with-svg-polygon-elements） – Cristy

六邊形是根svg元素，它不是多邊形元素的id。 –

你需要找到svg的中心（我認爲我有那個正確但你可能想要驗證）。一旦你有，你可以旋轉到「看老鼠」

document.addEventListener("mousemove", function(event) { 
 

 
    var follower = document.getElementById("hexagon"); 
 

 
    // ----------------------- 
 
    // calculate the center of the hexagon 
 
    // ----------------------- 
 
    var followerCentroid = (function() { 
 
    var followerClientBox = follower.getBoundingClientRect(); 
 
    return [ 
 
     (followerClientBox.top + followerClientBox.bottom)/2, 
 
     (followerClientBox.left + followerClientBox.right)/2 
 
    ]; 
 
    })(); 
 
    // ----------------------- 
 

 
    // ----------------------- 
 
    // rotate to look at mouse 
 
    // ----------------------- 
 
    var lookAngle = Math.atan2(
 
        event.pageX - followerCentroid[1], 
 
        -(event.pageY - followerCentroid[0])) * (180/Math.PI); 
 

 
    follower.style.transform = 'rotate(' + lookAngle + 'deg)'; 
 
    // ----------------------- 
 
});

<div style="padding: 50px;"> 
 
    <svg id="hexagon"> 
 
    <defs> 
 
     <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox"> 
 
     <image height="1" width="1" preserveAspectRatio="none" xlink:href="https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg" /> 
 
     </pattern> 
 
    </defs> 
 
    <polygon fill="url(#pattern1)" points=" 121.25 0 242.5 100 242.5 300 121.25 400 121.25 400 0 300 0 100" /> 
 
    </svg> 
 
</div>

來源

2016-06-11 21:51:38 JonSG

它看起來像你的多邊形不在你的svg中，所以「目標有點偏離」。 – JonSG

無法動態調整多邊形的座標

回答

相關問題