Any way to mask SVG clipping path for CSS?

Question

I have a DIV element that I want to copy.

I can use -webkit-clip-path to reference the SVG clipPath element and clipPath element:

HTML example

 <svg width="0" height="0"> <clipPath id="clipping"> <polygon points="0 100, 300 30, 220 290" /> </clipPath> </svg> <div id="tiles"></div> 

CSS example

 #tiles { background:red; width:300px; height:300px; -webkit-clip-path: url(#clipping); } 

See JSFiddle .

But how can I cut out a shape from this shape? For example, put another triangle in a red triangle? How to mask the cropping path?

A few years ago, I saw some resources saying that Firefox supports it, but I need it to work in Chrome, so I did not even try to get it to work with Firefox.

I read that Chrome supports -webkit-mask-image , and I saw examples of its operation (see Twitter example ) . But when I tried to recreate it on jsfiddle, I realized that it works with external SVG files, but not with built-in SVG. See jsfiddle .

Clipping the clipping path does not work, and clipping the clipping path does not work either, because clipPath does not support the mask attribute.

Does anyone have a solution, or should I wait for Chrome to be able to do this?

Answer 1

When you set the clip polygon, you are not limited to convex shapes.

If you specify

 <polygon points="0 100, 220 290, 300 30, 220 100, 220 220, 180 100, 220 100, 300 30"></polygon> 

This will draw an external triangle (the same one you had), and then go inside it and cut another triangle.

updated violin

If you do it this way, you just need to remember to draw an inner triangle in the opposite rotation than the triangle out

editing

Yes, you can clip the clip.

Watch this updated demo.

CSS

 <svg width="0" height="0"> <clipPath id="clip1"> <polygon points="0 100, 220 290, 300 30"></polygon> </clipPath> <clipPath id="clip2" clip-path="url(#clip1)"> <polygon points="0 0, 9999 0, 9999 9999, 0 9999, 0 0, 150 140, 180 190, 220 30, 150 140"></polygon> </clipPath> </svg> 

2 notes:

firstly, the syntax for this is not very user friendly. As far as I know, if you want to use 5 polygons, you need to connect them with each other.

second, since you want (or at least seem to want) that the polygons are "cut", you must make them "negative". This made it possible to wrap it in a huge rectangle around it (coordinates 9999). The good news is that this is code that you can copy to a folder.

In any case, as you were warned in another answer, this technology is actually not very stable.

Answer 2

Cropping is currently immature in browsers, so you are likely to run into problems using clip-path and / or SVG.

If I can suggest a different approach, you can use the Canvas element as an engine to draw triangles, their clips, etc. This will work in most modern browsers, even IE.

For example, using the following code will result in the following:

Now this element can be used like any other element and have transparency if you need to use it as an overlay.

The process is simple - a common function that takes polygonal points as an array and color:

 function drawPolygon(points, color) { ctx.beginPath(); ctx.moveTo(points[0], points[1]); for(var i = 2; i < polygon.length; i+=2) ctx.lineTo(points[i], points[i+1]); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); } 

Now all we need to do is call once for the outer triangle, change the composite mode so that we “punch a hole” with the following draw:

 /// draw first red triangle drawPolygon(polygon, '#f00'); /// composite mode to clear the first drawing with the next ctx.globalCompositeOperation = 'destination-out'; /// a smaller triangle will make the hole (color not important here) drawPolygon(polygon2, '#00f'); 

ONLINE DEMO

You can even set the canvas as a background image to another element:

 divId.style.backgroundImage = canvas.toDataURL(); 

I am using easyCanvasJS in a demo, but it is not required for this (it is used here to configure the canvas, etc ..).