Почему -webkit-mask работает только с inline?

Почему не работает маска, если указываю внешний файл?
Пример:
<div class="a"></div>
.a {width: 200px; height: 300px;
	  background-color: #ccc;
	  background: linear-gradient(45deg, blue, green);
	  -webkit-mask: url(check.svg); }


Вот так не работает! Но если я конвертирую svg в сервисе: https://yoksel.github.io/url-encoder/ru/
и вставлю так:

-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M.9 10.2c1.6 1.4 4.9 5.5 5.6 8.9.1.5 1.1.6 1.4-.1 3.3-7.7 5.1-12.2 9.8-16.8C19.4.5 18.8 0 17.2.8c-3.7 2-7.5 7-10 11.7-2.7-2.4-3.5-2.5-5-3.1-1.6-.6-1.5.5-1.3.8z'/%3E%3C/svg%3E") no-repeat center;

то все работает!
PS. html-файл и svg-файл находятся в одной папке
  • Вопрос задан
  • 24 просмотра
Решения вопроса 1
RAX7
@RAX7
Если открыть html как файл, то не работает, а если использовать локальный сервер, то все ок
spoiler
608f81593561d063132996.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы