How to use SVG clipPath with Pattern via CSS clip-path property?

Question

The initial SVG figure with pattern:

Need to achieve:

One instance of the SVG figure with pattern for refferencing with CSS as clip-path.

I have tried to create SVG clipPath element and bind to CSS clip-path by this way

.figure {
  width: 300px;
  height: 300px;
  clip-path: url(#img-dotted-clip-path);
  background-color: #1063B1;
}

Nothing happens. Expected result - the same as the previous snippet.

For comparing:

If I use SVG rect - CSS clip-path works. If pattern - doesn't

.figure {
  width: 300px;
  height: 300px;
  clip-path: url(#img-dotted-clip-path);
  background-color: #1063B1;
}

user_8620333 · Answer

You can recreate the same thing using mask combined with radial-gradient

.figure {
  width: 300px;
  height: 300px;
  background:linear-gradient(to right,red,#1063B1);  
                          /*radius here                           size here*/
  -webkit-mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
          mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
}


body {
  background:#f2f2f2;
}

Or consider the SVG inside the mask property. Make sure to escape the # and correctly set the viewbox and width/height to have a perfect repeat

.figure {
  width: 300px;
  height: 300px;
  background:linear-gradient(to right,red,#1063B1);  
  -webkit-mask:url('data:image/svg+xml;utf8,');
          mask:url('data:image/svg+xml;utf8,');
}


body {
  background:#f2f2f2;
}

user_1292848 · Answer

The only things that are valid inside a clip path are:

Shape elements (‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’)
‘text’
‘use’

Plus you can use animation elements etc to animate the clip path. However, only the shapes of those elements are used. Effects such as patterns, filters, etc are ignored.

The only way you could get the effect you want to work as a clipping path would be to add numerous elements to your .


   
   
   
   
   ... etc ...

But you could use a mask instead. Masks allow patterns.

.figure {
  width: 300px;
  height: 300px;
  -webkit-mask: url(#img-dotted-mask);
          mask: url(#img-dotted-mask);
  background-color: #1063B1;
}

This only works in Firefox

However inline SVG masks applied to HTML elements, like my example above, only work in Firefox. To get an SVG mask to work in Chrome, you would need to use mask or mask-image with an external or Data URL (as Temani has done in their answer).

How to use SVG clipPath with Pattern via CSS clip-path property?

2 Answers