Use SVG clip path as binary choice on showing objects?

Question

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>

Answer 1

An old trick which does not do the wanted thing, but something resembling. It removes all closed paths or preset closed curve objects (polygons, ellipses, circles) which are partially or fully outside a given path. The objects must not overlap and they must all have the same color - everyone will lose its individual fill and stroke. The program = Inkscape.

1. Black circles. The red closed path is the border. Only 3 of the circles are fully inside the red path and will stay, others will be removed

2. Another closed path (=blue) is drawn. It's around all except a small part of it visits inside the red path

3. The red path is lifted to top and subtracted from the blue curve (=Path > Difference) The circles which should stay are outside the result.

4. Select all and apply Path > Union

5. Apply Path > Break Apart and delete that part of the union which is one contiguous chunk

Answer 2

(There is already a correct answer to your specific question. This is more of an extended comment with an alternative idea.)

As mentioned in comments it might be easiest to prepare the graphics in a vector drawing application like Illustrator or Inkscape (anyway that's how a traditional graphic designer thinks).

For a similar result, you could instead render the SVGs on a canvas, loop through each pixels of the canvas and add an SVG circle for each pixel which has a color above a certain threshold.

Both methods have the problem that the circles are created at a certain scale. You would have to always display all shapes at the same scale or you would get circles in different sizes. When scaling/zooming in, the circles would also be scaled.

Wouldn't it be a cooler effect if you instead regarded the circle pattern as a kind of rasterization? Like having a monitor with circular pixels. So the circles should never move or scale, instead the graphics should always be rendered using the same grid. This could be achieved in several different ways.

A simple method could be to render your graphics as black and white pixels with no anti-aliasing at a low resolution but scaled up and then add a pattern on top to create the circles.

Here is a quick and naïve JSFiddle showing the idea.

I see no advantage in rendering SVG circles instead of raster images. The user won't be able to tell the difference and, as mentioned above, the SVG circles won't necessarily be scalable as such as you might not want the circles to scale visually anyway.

If you need to be able to detect mouse interaction with the different shapes you would have to either write your on sprite class with mouse interactions or have a separate, hidden layer with the original SVGs and of course make sure they are always scaled exactly like the actual displayed image.

You could also look into making a WebGL shader that does the job or use some existing library like perhaps PixiJS.

No matter which method you choose, it's going to get a bit convoluted. The way you display the graphics is somewhat weaved into the functionality. Without knowing the details of your project, it's hard to tell which method would be best.

Answer 3

What you're trying to do is not possible with SVG alone. Any scripting language that can access the data (like JavaScript) should be able to do what you're trying to do.

The logic is actually pretty simple - get the line from the center of the big circle to the center of a little circle. Then continue on in that direction for the distance of the little circle's radius and get the point. If the distance from that point to the center of the big circle is greater than the radius of the big circle, hide/remove the little circle. Repeat for every little circle.