javascript - 如何正确使用SVG checkintersection()函数?

标签 javascript html svg

我的 SVG checkintersection() 有问题功能。我想要做的就是检查一个小的 SVG 矩形是否与 SVG 路径的区域相交,但我不知道要调用什么函数(我已经尝试在 SVG DOM 对象上调用它,其中谷歌发现的其他几件事)。

所以我需要知道的是在这个片段中为占位符(“foo”)输入什么:

var closedPath = document.getElementById(closedPath);
var rectangle = document.getElementById(rectangle);

if (foo.checkIntersection(closedPath, rectangle)) {
    //do stuff
};

HTML 与

<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svgroot">
      <g>
        <path id="closedPath" fill="{$c5}" d="M-250179-46928l-5051 1351l-867-1760l-33-146l-12-99l-82-678l-17-249l86-644l305-1800l158-2882l75-1425l-47-280l-22-131l-137-411l-300-892l1273 620l931-109l1957-734l1860-1096l292-192l884 547l2690 2153l480 963l36 244l-948 1878l-376 591l-60 567l-72 1147l97 847l-222 334l-122 117l-2403 2093l-353 76z"/>
        <rect id="rectangle" fill="white" x="-126828" y="0" width="45000" height="45000"/>
      </g>
    </svg>
  </body>
</html>

如有任何帮助,我们将不胜感激!

编辑:只是想补充一点,我现在使用一种解决方法,包括使用我编写的解析器函数将 SVG 路径转换为点坐标数组,然后将其放入简单的坐标测试函数中。 这也可能是一个解决方案 Hit-testing SVG shapes?

最佳答案

checkIntersection 是 <svg> 上的一个方法元素,所以你会想要这样的东西......

var svg = document.getElementById("svgroot");

var closedPath = document.getElementById(closedPath);
var rectangle = document.getElementById(rectangle);

var rect = svg.createSVGRect();
rect.x = rectangle.animVal.x;
rect.y = rectangle.animVal.y;
rect.height = rectangle.animVal.height;
rect.width = rectangle.animVal.width;

svg.checkIntersection(closedPath, rect) {
    // do stuff
}

另请注意第二个参数必须是 SVGRect 而不是元素。

SVG 元素支持 SMIL 动画,您同样可以编写 rectangle.baseVal.x 等,但如果您正在为矩形设置动画,那不一定会反射(reflect)矩形的当前位置。如果您不使用 SMIL,则 rectangle.baseVal.x = rectangle.animVal.x

因为 <rect> 可以有圆 Angular 之类的东西它没有 SVGRect 接口(interface)所以你必须从它有的接口(interface)(SVGRectElement)转换为你需要的接口(interface)(SVGRect)

关于javascript - 如何正确使用SVG checkintersection()函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18934734/

相关文章:

Javascript If 条件检查窗口加载

javascript - 如何在onclick按钮传递函数的js函数中传递字符串第二个参数?

javascript - svg<g>元素的BBox计算

javascript - 如果需要登录,如何在 Node.js 服务器端使用 Mocha Chai 测试 RESTful CRUD api?

javascript - Html5 表单重置按钮会记住每个表单字段加载的内容,该信息是否可用

html - 使用边距将两个 div 放在同一行

html - 为什么这个 SVG 滤镜动画在 Edge 或 Chrome 中不起作用?

html - 试图用 CSS 填充 SVG,但不起作用

html - less 是不是像 CSS 一样被浏览器解释?

javascript - 在 for 循环按钮中添加类单击