I'm creating an SVG file using python svgwrite and there's a shape in the center of my drawing that I created with a path. I want to remove elements that are not inside my wrapper shape.
first of all, can I remove them in the svgwrite? if not how can I find all the elements in the frontend using javascript to remove any of them that are not inside my shape?
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"))
I prefer to delete them in the frontend using javascript. I got the bounding of my shape like below:
var heart = document.querySelector("#heart_wrapper")
var {xHeart, yHeart} = heart.getBBox()
Note: The thing I do not know exactly is that how to determine if a dot is inside my shape. I know how to select all of the dots and just remove them
Here is the generated svg shape:
<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>