Почему такой баг с SVG mask?

Question

[Максим]

Значит часто сам пишу svg или для сложных задач использую редакторы ! Вот для примера щас открыл Лису и пример сделанный моим коллегой по ruSO и увидел что ни черта не отображается
Так же открыл всем известный can in use на котором написано что SVG mask поддерживается в Firefox но реальный просмотр убедил в обратном !
Был так же пост на том же SO о том что некто занимался анимацией SVG под IE11 я разумеется отписался что это не реально если верить тому же can in use меня тот чувак посчитал долбо.... ну а сам отписался что у него работает в том же IE11 и какого чёрта я пишу то что не знаю

Так чему верить ? Не ужели теперь устанавливать все вэб путешественники и покупать все ОС и проверять везде ?
Что за лажа ?

Answer 1

[Ivan Bogachev]

Тоже не поверил, что в FF могут быть проблемы с маской. Уже подумал, что вы баг в браузере нашли... Но все оказалось куда проще - в ответе на SO какая-то жесть творится с размерами, я ее немного поправил и все заработало:

<svg viewbox='0 0 100 100'>
    <defs>
        <mask id='mask'>
            <rect x='0' y='0' width='100' height='100' fill='rgba(255,255,255,0.5)' />
            <circle r='50' cx='50' cy='50' fill='#000' />
        </mask>
    </defs>
    <image xlink:href='....' x='0' y='0' width='100'height='100' />
    <rect x='0' y='0' width='100' height='100' fill='white' mask='url(#mask)' />
</svg>

С самой маской проблем нет.
CodePen

Comments

[Максим]

так это получается что при указании width="100" сам процент не надо указывать ?

[Ivan Bogachev]

Максим Ленский, Не совсем. Это просто удачное (и очень удобное) совпадение 1px=1% при использовании viewbox='0 0 100 100'. Зачем думать и переводить разные единицы измерения друг в друга, если можно сразу сказать - тут все всегда будет от 0 до 100?

[Максим]

Ivan Bogachev, Кстати Иван а ты смотрел по той ссылке мой пример? та на mix-blend-mode я щас проверил в Edge работает ... хотя can in use говорит что нет ....wtf ?

[Ivan Bogachev]

mix-blend-mode я щас проверил в Edge работает

Странно, я посмотрел ваши примеры через crossbrowsertesting и ни в ie, ни в edge mix-blend-mode не работает, как и говорит caniuse.

[Максим]

Ivan Bogachev, у меня мих-бленд-мод работает в эдже ... вот полноэкранный скрин https://cloud.mail.ru/public/H1oh/ese8a7Nzy

[Ivan Bogachev]

Максим Ленский, Нет, не работает. В первых примерах явно все розовое, так быть не должно. А в последнем - у вас ::after прозрачный. Его можно вообще убрать - ничего не поменяется. Поэтому когда на нем mix-blend-mode ломается - мы не видим разницы.

[Максим]

Ivan Bogachev, мих это дырка сама - там же блок - целый - просто квадрат перекрывает картинку а на миксе -- хотя ладно я щас другой пример сделаю и покажу- если ошибаюсь то ошибаюсь

[Максим]

Ivan Bogachev, действительно так .... спс за разъяснения

Answer 2

[forspamonly2]

https://developer.mozilla.org/en-US/docs/Web/SVG/E...

width: The width the image renders at. Unlike HTML's , this attribute is required.
height: The height the image renders at. Unlike HTML's , this attribute is required.