svg - 如何检测一个点是否在复杂的不规则矢量形状(SVG)内?
问题描述
我对这一切或多或少都是陌生的。我正在尝试使用 SVG 创建一个应用程序(因为我宁愿拥有可以缩放而不损失质量的矢量形状)。使用 Web 技术,后来迁移到 react-native。
有什么方法可以让我找出一个点(x,y,也由 CSS 的left和top属性决定)是否在一个高度复杂的、不规则的矢量形状内?
我知道我的问题充满了限制,这使得它很难回答,即使指向正确的文档也会有所帮助。
PS:我尝试了 elementFromPoint() 方法,但它返回了 DOM 在我的 SVG 周围放置的边界矩形。这完全违背了我的目的,我想确保仅在 SVG 路径和形状本身中检测到该点。任何帮助表示赞赏,谢谢!
解决方案
只要您使用内联 SVG,elementFromPoint()
就应该可以正常工作:
const shape = document.querySelector('#shape'),
status = document.querySelector('#inout');
document.body.addEventListener('mousemove', function(e) {
const x = e.clientX,
y = e.clientY;
if(document.elementFromPoint(x, y) === shape) {
status.className = status.textContent = 'inside';
}
else {
status.className = status.textContent = 'outside';
}
});
h2 { margin: 0; }
.inside { color: lime; }
.outside { color: red; }
<h2>The cursor is: <span id="inout" class="outside">outside</span></h2>
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200">
<path id="shape" d="M150,120 q26,75 -80,50 c-80,-25 -53,-125 -26,-125 c53,-25 107,-25 107,50 q107,-50 53,50 z"
stroke-width="4" fill="yellow" stroke="limegreen" />
</svg>
推荐阅读
- laravel - 链接不适用于带有 azure 服务器的 laravel 应用程序
- android - 关闭当前片段并打开上一个片段
- algorithm - 过期的消息哈希验证器
- python - Python ValueError for code that calculates correct results
- c# - 通过 Automapper 进行深度克隆,忽略层次结构中的特定属性
- hyperledger-fabric - 使用 Hyperledger Composer 文档在本地部署 Fabric 并出现错误
- python - 有什么方法可以进行虚拟缩进吗?
- typescript - Generics for Typesafe-Actions library
- javascript - 通过到 php
- c - C 中冒泡排序算法的运行时