Я пытаюсь добавить функциональность, где я могу получить изображение SVG с сервера, а затем использовать его в качестве значка любого цвета, который я хочу, изменив CSS. Несколько предостережений на случай, если люди захотят пометить его как дубликат / уже решенный:
- Мне нужно установить свойство mask-image inline, потому что я перебираю объекты с путем к изображению в одномсвойств.
- Я не могу нарисовать маску, используя элемент SVG, потому что я получаю все изображение с сервера.
- Я не могу использовать метод фильтра (https://codepen.io/sosuke/pen/Pjoqqp), потому что Edge не реагирует на эти фильтры должным образом (например, у нас есть определенный оттенок синего, но на Edge он становится фиолетовым).
После долгих проблем и исследований я решилв решении mask-image с настройкой цвета изображения с помощью свойства background-color, но у меня большие проблемы с его настройкой в Firefox. Оно работает в Chrome и Edge. Аналогичное решение работает в Chrome, Firefox и Edgeв нашей системе иконок, где у нас есть файл CSS с классом на иконку, установка свойства mask-image с URL-адресом изображения в этом классе CSS. Эти изображения являются частью проекта Angularct.
Я попытался просто установить изображение как background-image inline, и оно действительно появляется, поэтому само изображение загружается.
Вот базовый класс CSS для обработки размеров:
.icon
{
width: 45px;
height: 64px;
background-color: black; //this is the base color,
//I'll then have an inline style that
//calculates the final color. This is not in place yet,
//as I'm having trouble just making the black image appear
display: inline-block;
-webkit-mask-size: contain;
mask-size: contain;
}
Я также пытался установить свойство размера маски точно с помощью mask-size: 45px 64px;.
И стиль добавляется в шаблон следующим образом:
<i class="icon" [style.-webkit-mask-image]="'url(' + basePath + imgUri')'" [style.mask-image]="'url(' + basePath + imgUri')'"></i>
Где basePath - это общий элемент или URL-адрес для каждого изображения, а imgUri - имя файла конкретного изображения.
Я не совсем уверен, что установил style.-webkit-mask-image и style.mask-imageнеобходимо, но оставление только одного из них не решает проблему.
Поведение в Firefox таково, что изображения просто нет вообще. Как будто это полностью отсутствовало. Черный ящик также не виден (чего и следовало ожидать, если маска не была установлена).
РЕДАКТИРОВАТЬ: Видимо, я все делал правильно, но политика CORS в API мешала отображению изображения. По какой-то причине это касается только Firefox и только при использовании свойства mask-image. Итак, путешественник из будущего, код, написанный выше, является правильным способом использования mask-image с SVG, извлеченными из API.