javascript - 无法动态操作多边形的坐标

Question

我想让图像显示为六边形。因此我正在使用 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> 

我做错了什么？

Answer 1

您需要找到 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>