使用JavaScript检测闭合SVG多边形内的命中_Javascript_Svg_Point In Polygon

使用JavaScript检测闭合SVG多边形内的命中

javascript svg

使用JavaScript检测闭合SVG多边形内的命中,javascript,svg,point-in-polygon,Javascript,Svg,Point In Polygon,在一个裸体测试中，我创建了一个SVG五角大楼，其中有一个矩形正好适合它。我运行svg.checkIntersection（五角大楼，矩形）来测试1x1矩形是否在五角大楼的区域内这将返回五角大楼边界矩形内任何点的true。我如何才能让它返回false，除非点实际上在五边形本身内以下是我的HTML代码： <!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8"> <titl

在一个裸体测试中，我创建了一个SVG五角大楼，其中有一个矩形正好适合它。我运行

svg.checkIntersection（五角大楼，矩形）

来测试1x1矩形是否在五角大楼的区域内

这将返回五角大楼边界矩形内任何点的

true

。我如何才能让它返回

false

，除非点实际上在五边形本身内

以下是我的HTML代码：

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset="utf-8">
  <title>Hit SVG</title> 
</head>
<body>
<!-- Pentagon with a side of 100px -->
<svg xmlns="http://www.w3.org/2000/svg"
     style="display: none;">
  <symbol id="pentagon">
    <polygon
points="
80.9016994375,0
0,58.7785252292
30.9016994375,153.8841768588
130.9016994375,153.8841768588
161.8033988750,58.7785252292
"
style="stroke: #eee"></polygon>
  </symbol>
</svg>

<!-- Rectangle with a golden ratio -->
<svg class="container" width="324" height="308" onclick="hitTest(event)">
  <rect width="324" height="308" style="fill: #ccc"></rect>
  <rect width="162" height="154" style="fill: #999"></rect>

  <svg style="fill:#333" viewBox="0 0 162 154", width="162" height="154">
    <use xlink:href="#pentagon"></use>
  </svg>
</svg>

<script>
function hitTest(event) {
  var svg = event.currentTarget
  var pentagon = document.querySelector("use")

  var rect = svg.createSVGRect()
  rect.x = event.offsetX
  rect.y = event.offsetY
  rect.width = rect.height = 1
  hit = svg.checkIntersection(pentagon, rect)
  console.log(hit)
}
</script>
</body>


命中SVG
功能测试（事件）{
var svg=event.currentTarget
var五角大楼=document.querySelector（“使用”）
var rect=svg.createSVGRect（）
rect.x=event.offsetX
rect.y=event.offsetY
rect.width=rect.height=1
hit=svg.checkIntersection（五角大楼、矩形）
控制台日志（点击）
}

此行为和FireFox存在Chrome问题此行为和FireFox存在Chrome问题