LenovoId
@LenovoId
what the fuck ?

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

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

Так чему верить ? Не ужели теперь устанавливать все вэб путешественники и покупать все ОС и проверять везде ?
Что за лажа ?
  • Вопрос задан
  • 208 просмотров
Решения вопроса 2
sfi0zy
@sfi0zy
UI developer. Верстаю неверстаемое.
Тоже не поверил, что в 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
Ответ написан
@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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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