This post may be too much on the technical side for this forum, but I don't know which other forum may be appropriate.
I would like to use the SVG clip path to act as a threshold for if you will show the object underneath or not. I would want to be able to take the decision to not show the underlying object based off of if
- it's partially obscured by clip path,
- >50% of object is clipped, or
- threshold value (X %) for how much the object is obscured.
You could say that the first two are just special cases of the latter one.
Let's start from a generated picture to exemplify, and one edited to remove any object that is in any way cut however so slightly by the clip path. (As you can see the grid sample is not symmetric within the clip path, so it seems somewhat malformed, but that's expected.)
I have looked at the clipPath attributes and I cannot find anything related to clipping in the SVG standard that would support this. Is this possible with the current SVG standard to use the clip path (or some other mechanism?) or do I need to resort to JS?!
(Another option I would like to see would be to make the clipped objects more transparent relative to how much they are clipped. This should be way harder but would not make a difference if you need to use JS to accomplish the above.)
A probably naïve way to do the clipping is shown here in the SVG markup and the left image is what results from this code:
<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="small_dot_grid_element" width="7" height="7" patternUnits="userSpaceOnUse"> <circle cx="4" cy="4" r="3" style="fill: black; stroke: none;" /> </pattern> <clipPath id="circular_crop"> <circle cx="150" cy="150" r="120" style="fill: black; stroke: none;" /> </clipPath> </defs> <rect width="100%" height="100%" style="fill: url(#small_dot_grid_element); clip-path: url(#circular_crop);" /> </svg>