Как правильно сделать SVG Mask?

Question

[Игорь]

пример 1

2 - в примере вектор имее размер не больше 30px и картинка не больше 30px но картинке приходится прописывать громадные размеры что бы она была своего (приблезительно размера) Мне кажется это тоже не правильно?! почему так? и как исправить?

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

Comments

[#rybak]

пример не работает

[#rybak]

Вот хорошая статья на эту тему css.yoksel.ru/css-and-svg-masks

Answer 1

[Александр Гончаров]

На самом деле скорее всего несоответствие с атрибутом viewbox у самого SVG элемента. Вот ролик, в котором рассказано как это сделать с помощью CSS свойства `mask-image`, но это работает конечно не везде: https://uwebdesign.ru/css-clipping-masking/.