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的中心（我想我有正确但你可能想验证）。完成后，您可以将其旋转到＆＃34;查看鼠标＆＃34;

＆＃13;

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)';
  // -----------------------
});

＆＃13;

<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>

＆＃13;

无法动态操纵多边形的坐标

1 个答案: