javascript - 仅使用 getBoundingClientRect 在 svg 的特定区域中查找元素
问题描述
我正在SVG
使用创建一个文件,python svgwrite
并且在我的绘图中心有一个形状,是我用路径创建的。我想删除不在包装形状内的元素。
首先,我可以删除它们svgwrite
吗?如果不是,我如何使用 javascript 找到前端中的所有元素以删除任何不在我的形状内的元素?
svgwrite
# dots that are genrated in the svg are like this
image.add(image.circle((x, y), mag, id='dot', stroke="none", fill=color))
# this is my heart shape that should dots go inside of it
image.defs.add(image.path(d="M0 200 v-200 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0z", id="heart_shape", style="rotate: 225deg;scale:1.9;stroke: #fff;", opacity="1"))
image.add(image.use(href="#heart_shape", fill="none", insert=(half_x, str(height-80)+"mm"), id="heart_wrapper"))
我更喜欢使用 javascript 在前端删除它们。我得到了如下形状的边界:
var heart = document.querySelector("#heart_wrapper")
var {xHeart, yHeart} = heart.getBBox()
注意:我不确切知道的是如何确定 adot
是否在我的形状内。我知道如何选择所有点并删除它们
这是生成的 svg 形状:
<use xmlns="http://www.w3.org/2000/svg" fill="none" id="heart_wrapper" x="377.9527559055118" xlink:href="#heart_shape" xmlns:xlink="http://www.w3.org/1999/xlink" y="195mm">
<path d="M0 200 v-200 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0z" id="heart_shape" opacity="1" style="rotate: 225deg;scale:1.9;stroke: #fff;"></path>
</use>
解决方案
如果您有svg
、 theheart
和 the的元素dot
,您可以使用它checkIntersection
来检查一个元素是否存在于另一个元素的边界内。所以,要检查是否dot
在里面heart
:
var intersecting = svg.checkIntersection(dot, heart.getBBox());
推荐阅读
- ios - 如何将 Swift 字典写入 Firestore 地图/字典?
- node.js - MERN Stack 为所有用户显示相同的数据
- android - React Native Android:弹跳滚动视图
- c# - 如果没有记录,如何避免 .Average 在 LINQ 表达式中引发异常?
- r - 如何在 R 的数据框中的数据子集之间进行 t 检验?
- python - 通过从 excel 读取数据来观察 Python 代码上的值错误
- angular - 使用角度离子设置单选按钮值布尔值
- java - 如何使用 Java 中的 Graphics2D 对象创建具有混合模式的矩形?
- r - 无法使范围缩放功能正常工作
- c++ - 如何修复分段错误:C++ 中的 11?