Как сделать заливку чёрным цветом у этой svg иконки?

Question

[ДМИТРИЙ Т.]

Нужно сделать кнопку svg иконкой. Думаю задать тегу button фоновой картинкой svg иконку, а при наведении заменять её такой же иконкой, но уже с залитой чёрным цветом.

Comments

[Gimir]

Я обычно экспортирую их с заливкой, потом уже меняю path заливки.

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/wvWJBEG

<svg width="21" height="19"  xmlns="http://www.w3.org/2000/svg">
<path d="M19.154 9.33822C21.294 7.19833 21.294 3.72364 19.154 1.60492C17.014 -0.534975 13.5392 -0.534975 11.3992 1.60492L10.361 2.66428L9.32276 1.62611C7.18277 -0.534975 3.70792 -0.534975 1.58911 1.60492C0.550891 2.64309 0 4.02026 0 5.48217C0 6.94408 0.572079 8.32124 1.58911 9.35941L10.361 18.1309L19.154 9.33822Z" fill="black"/>
</svg>

надо удалить под маску

Comments

[ДМИТРИЙ Т.]

Спасибо за ответ. А как в будущем определять что является подмаской, а что относится к самой иконке?

[Максим]

ДМИТРИЙ Т., путь (path) в svg всегда начинается с большой или маленькой буквы M (m) а в вашем пути (path) в одном path два M то есть (я поставлю пробелы для видимости)

M19.154 9.33822C21.294 7.19833 21.294 3.72364 19.154 1.60492C17.014 -0.534975 13.5392 -0.534975 11.3992 1.60492L10.361 2.66428L9.32276 1.62611C7.18277 -0.534975 3.70792 -0.534975 1.58911 1.60492C0.550891 2.64309 0 4.02026 0 5.48217C0 6.94408 0.572079 8.32124 1.58911 9.35941L10.361 18.1309L19.154 9.33822Z

M1.35604 5.48217C1.35604 4.38044 1.7798 3.36346 2.56376 2.60072C3.36891 1.79561 4.40712 1.39305 5.44534 1.39305C6.48356 1.39305 7.52178 1.79561 8.32692 2.60072L10.361 4.6135L12.395 2.57953C13.9841 0.990498 16.5903 0.990498 18.1582 2.57953C18.921 3.34227 19.3659 4.35925 19.3659 5.46098C19.3659 6.56271 18.9422 7.57969 18.1582 8.34243L10.361 16.1605L2.56376 8.36362C1.80099 7.57969 1.35604 6.56271 1.35604 5.48217Z

так вот нижний path от M до Z это под маска - если нужна полная заливка то надо удалить