How to make an SVG Mask correctly?

Question

css

example 1
2 - in the example, the vector has a size of no more than 30px and the picture is no more than 30px, but the picture has to be given huge sizes so that it has its own (approximately size) I don't think this is correct either?! why is that? and how to fix?

<image clip-path="url(#hex-mask)" height="461px" width="461px"

Answer 1

In fact, most likely a mismatch with the viewbox attribute on the SVG element itself. Here is a video that shows how to do this using the `mask-image` CSS property, but of course this does not work everywhere: https://uwebdesign.ru/css-clipping-masking/.