Файл SVG не используется в качестве маски CSS
Я хочу использовать файл SVG в качестве маски для некоторых изображений. Однако он не используется, а скрывает все изображение. Я включил его отдельно, чтобы проверить, правильный ли путь, но как изображение оно загружается нормально. Я также проверил это в разных браузерах, с кавычками и без них, добавил несколько заголовков в SVG, но ничего.
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#testDiv
{
display: inline-block;
-webkit-mask:url("1.svg");
}
</style>
</head>
<body>
<div id = "testDiv">
<img id = "test" src = "1.png" style = "height: 250px; width: 1500px; object-fit: cover;">
</div>
<img src = "1.svg">
</body>
</html>
СВГ:
<svg xmlns = "http://www.w3.org/2000/svg" height = "250px" width = "1500px">
<text x = "0" y = "180" font-family = "Cambria, sans-serif" font-size = "250">
Text masking
</text>
</svg>
Вывод (верхняя часть пуста, но должно отображаться замаскированное изображение):
Что я делаю не так? Спасибо.
Также должен сказать, что это работает нормально (я вырезал и отформатировал его, чтобы было понятнее, но в коде это однострочная строка без разрывов строк):
-webkit-mask:url('data:image/svg+xml;utf8,
<svg xmlns = "http://www.w3.org/2000/svg" height = "250px" width = "1500px">
<text id = "mask" x = "0" y = "180" font-family = "Cambria, sans-serif" font-size = "250">
Test masking
</text>
</svg>');
Обновлено: я поместил его в «встроенный» CSS, и он показывает предварительный просмотр, поэтому SVG находится, но не применяется:
@Nikk Я вставил localhost, но он выглядит так же.
Как прокомментировал @Nikk: это не сработает, если вы откроете его напрямую (в файловом режиме). Тестирование на локальном сервере прошло безупречно. Также дважды проверьте свои пути/URL-адреса. URL-адрес svg маски должен быть относительным к конечному выходному каталогу вашего файла CSS (особенно актуально, если вы используете препроцессоры, такие как scss или упаковщики, которые могут выводить скомпилированный CSS в другой). Я предполагаю, что ваш main.css не находится в вашем корне каталог.
Ответы 2
Здесь есть несколько возможностей:
- Запрос к
1.svgприводит к некоторому статусу 4xx (например, 404), поскольку сервер не может обработать запрос. - MIME-тип этого файла неверен при его передаче. Если это не
image/svg+xml, браузер не будет знать, что с этим делать.
Ваш следующий шаг — просмотреть запрос в консоли разработчика и посмотреть, что происходит.
Нижний текст — это сам SVG, он вроде нормально загружается, в консоли ошибок нет, а запросов не могу найти (это локальный HTML). Каков синтаксис установки типа MIME? Преобразование его в HTML и добавление метатега с информацией не дало эффекта.
Вы заходите на свою страницу по протоколу file:// или http://? Если вы откроете вкладку «Сеть» вашего браузера, щелкните запрос 1.svg и найдите заголовок Content-Type, о чем он говорит?
Вместо этого используйте «-webkit-mask-image»:
-webkit-mask-image:url("1.svg");
Не совсем «вместо». Но вы правы, к сожалению, маски CSS по-прежнему требуют некоторых префиксов браузера. Поэтому вам лучше использовать оба варианта, хотя Firefox щедро принял префикс поставщика веб-кита по умолчанию. более конкретный mask-image также должен работать без префиксов.
@herrstrietzel Проблема заключалась в том, что я использовал «-webkit-mask», поэтому он заменяет ее. В версии без приставок было бы так, как вы говорите.
Извините, я вижу. Честно говоря, свойства, связанные с маской, могут сбивать с толку. Тем не менее, я настоятельно рекомендую определять свойства с префиксами и без префиксов, поскольку мы не можем быть уверены, когда браузеры прекратят поддержку или отдадут предпочтение версиям без префиксов... по общему признанию, это не критично, поскольку, в частности, браузеры на основе Chrome основаны даже не на webkit, а на блинке. .. префиксы нас раздражают с самого начала =)
Вы открываете HTML-файл напрямую? Если да, то это может сработать, если вы используете статический сервер.