Можно ли на див поставить svg маску?

Question

[Виталий Киренков]

И чтоб работало на популярных современных браузерах?

Как навесить маску на изображение разобрался, а вот про див что-то никак не нагуглю =)

Answer 1

[Юрий Лобанов]

Вы это наверное пытаетесь реализовать задумку прошлого вопроса? )
На див не знаю как, но Вы можете поставить маску на элемент svg rect
<rect mask="url('#id_mask')"/>

upd:
codepen.io/iiil/pen/yxsui
Итак, вот я накидал пример. В качестве маски используется полигон. В качестве картинки - то, что выдает Ваш скрипт, то есть data:image
Ну и для проверки я показал как работать с ним через jquery, в общем-то там все просто. Таймаут через пять секунд меняет одно изображение на другое.
Без обид, но если не разберетесь - то жду коммерческого предложения на почту :)

Comments

[Виталий Киренков]

Да, продолжаю развлекаться =))
Мне это ничего не даёт... Нужно чтобы маска цеплялась на тот же тэг, на который я делаю инициализация Trianglify, который в свою очередь генерирует background: url(блаблабла)...
И вот как сочетать на тэге использование бг и маски одновременно, пока непонятно...

[Юрий Лобанов]

@DeLaVega так Вы Trianglify заставьте работать не с div, а с элементами svg. rect имеет атрибут fill, куда можно подцепить id заливки, в качестве заливки используйте pattern, куда вставляете image, а вот эту image попробуйте как раз и нарисовать с помощью Trianglify через url(data:image)

[Виталий Киренков]

Да можно и чисто с свг, а не с дивом, не вопрос...)) Задумка ваша ясна, но что то сомнительно вижу эту структуру. Я просто плохо знаком с аттрибутами свг. Можете хтмл-ём это показать, если не сложно?

[Юрий Лобанов]

@DeLaVega попробую, но может кину вариант только вечером

[Юрий Лобанов]

@DeLaVega смотрите по ссылке. Вопрос у меня - Вам вообще приходит уведомление, что я изменил ответ? И в каком виде, если не затруднит.

[Юрий Лобанов]

@DeLaVega работает точно в ff и ie11. В chrome надо исправить единицы полигона, с относительных на абсолютные. В общем, повторяю - в идеале, если разобраться - все должно работать. Можно почитать спецификации и постараться все на относительные единицы переделать, Вам скорее всего они удобнее будут. Я сам почти svg не знаю.

[Виталий Киренков]

Неа, не работает в фоксе. То что изменили ответ - не вижу. Только то, что добавили комментарий.

[Юрий Лобанов]

@DeLaVega как не работает? В ff30 codepen.io/iiil/pen/yxsui работает прекрасно. Я тут правил кое-что, может Вы попали на это, попробуйте еще раз, пожалуйста.

[Виталий Киренков]

Да, работает. Я в течении дня дошёл до этого варианта. Потом посмотрел на вес страницы и всплакнул =)) таких 5 картинок и уже полметра веса у страницы. Решил в итоге сделать иначе. Сохраню свгехи с полигонами и буду скриптом у них fill менять из массива цветов, думаю прикольно должно получится и вес будет норм.

[Юрий Лобанов]

@DeLaVega если я правильно понял Вашу задумку, то Ваш вариант лучше.

[Виталий Киренков]

@iiil Ну, нельзя сказать, что лучше, но более user-friendly.