我有一个svg路径,我想知道我的鼠标是否在svg路径上,如果是,我想将光标更改为鼠标指针。
这可以通过在路径上添加鼠标悬停属性以及使用此解决方案的Recognize point(x,y) is inside svg path or outside轻松完成。
但有一个扭曲,我有另一个透明层在它上面,因为我不能有这两个解决方案。
现在我正在制作顶层显示器,它工作正常。但正因为如此,我的鼠标指针和我所做的动作,如在鼠标移动时移动某个元素,是缓慢的,
因此,我想找出是否有任何其他更好的方法,而不使显示等于没有。
请找到小提琴的例子,我想改变光标指针时,它对mypath元素,也希望我的线应该移动,因为我移动鼠标在层上,我可以做显示到无层暂时,但我注意到在火狐,行移动不是那么顺利,
https://jsfiddle.net/shyam_bhiogade/9a7zuou2/6/的
<svg width="400" height="400">
<g>
<path id="mypath" d="M10 200 L200 90 L200 200" fill="transparent" stroke="black" stroke-width="5" />
<rect class="interactiveArea" width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);opacity:0.2" />
<line id="myline" x1="20" y1="0" x2="20" y2="400" stroke-width="2" stroke="black" />
</g>
</svg>
字符串
2条答案
按热度按时间qyuhtwio1#
我已经使用了https://bl.ocks.org/mbostock/8027637给出的解决方案,它返回x和y点到路径的距离,如果距离小于1px或笔划的宽度,我认为x和y点在路径上。
字符串
31moq8wy2#
**SVGGeometryElement.isPointInFill()**方法确定给定点是否在元素的填充形状内。正常命中测试规则适用;元素上的pointer-events属性的值确定点是否被认为在填充内。点参数被解释为元素的局部坐标系中的点。
个字符