Как применить одну SVG маску к нескольким фото?

Question

[ТемноКот]

Доброго времени суток!
Имеется вот такой код
https://codepen.io/akira13w/pen/WNRqXLm
Ничего особенного.
SVG маска наложенная на картинку

Код HTML

<div class="wrapper">
    <svg width="200" height="300" class="svg">

        <symbol id="s-mask-logo">
             <g stroke="gray" stroke-width="12" fill="white">
                <circle cx="33%" cy="30%" r="20%" />
                <circle cx="52%" cy="62%" r="32%" />
              </g>
        </symbol>

        <mask id="mask-logo">
            <use xlink:href="#s-mask-logo" />
        </mask>

        <symbol id="foto-1">
            <image xlink:href="https://images.unsplash.com/photo-1618870216357-fe28db18c337?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxOTg0MDk1Nw&ixlib=rb-1.2.1&q=80&w=400k" xlink:href="#foto-1" width="199" height="300" />
        </symbol>

        <symbol id="foto-2">
            <image xlink:href="https://images.unsplash.com/photo-1617247815841-35c481245e46?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxOTgzNjg5OQ&ixlib=rb-1.2.1&q=80&w=400" width="199" height="300" />
        </symbol>

        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#foto-1"></use>    

    </svg>

    <svg width="200" height="300" class="svg">
        <rect y="0" width="100%" height="100%" fill="black" />
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-mask-logo"></use>
    </svg>

    <svg width="200" height="300" class="svg">
        <g mask="url(#mask-logo)">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#foto-1"></use>
        </g>
    </svg>
    
    <svg width="200" height="300" class="svg">
        <g mask="url(#mask-logo)">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#foto-2"></use>
        </g>
    </svg>

</div>

С кодом всё как бы понятно.
Тут маске айдишник назначаем

<symbol id="s-mask-logo">
...
</symbol>

Тут айдишник картинки

<symbol id="foto-1">
...
</symbol>

Тут выводим по айдишнику картинку (для теста)

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#foto-1"></use>

Тут выводим по айдишнику маску (для теста)

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-mask-logo"></use>

А вот тут применяем маску (по ID) к картинке (по ID)

<svg width="200" height="300" class="svg">
        <g mask="url(#mask-logo)">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#foto-1"></use>
        </g>
    </svg>

И всё ничего, если картинка одна. А если их сто?
Это получается, к каждой приписывать ID, а потом уже по ID назначать маску?
А нельзя ли как-то упростить?

Answer 1

[Ivan Bogachev]

А нельзя ли как-то упростить?

На вкус и цвет, конечно, но я бы первым делом избавился от всех этих symbol и use. Без них воспринимать код проще, а из условий задачи вроде бы не следует, что они прямо нужны:

<svg width="200" height="300">
    <mask id="my-mask">
        <g stroke="gray" stroke-width="12" fill="white">
            <circle cx="33%" cy="30%" r="20%" />
            <circle cx="52%" cy="62%" r="32%" />
        </g>
    </mask>
</svg>

<!-- 1 -->
<svg width="200" height="300">
    <image href="https://picsum.photos/id/1/200/300" width="200" height="300" mask="url(#my-mask)"/>
</svg>

<!-- 2 -->
<svg width="200" height="300">
    <image href="https://picsum.photos/id/2/200/300" width="200" height="300" mask="url(#my-mask)"/>
</svg>

<!-- ...100500 -->
<svg width="200" height="300">
    <image href="https://picsum.photos/id/3/200/300" width="200" height="300" mask="url(#my-mask)"/>
</svg>

Ну а если вы хотите use, то да, все так, как вы и написали - много id, и следить, чтобы они случайно не продублировались при сборке страницы, а то начнется магия.

Comments

[ТемноКот]

Смотрел на ваш ответ... много думал (с)

Мда... полдня долбаться, пытаясь как-то изватиться с этими ID, вместо того, чтобы их просто выкинуть... Ведь нужны то рисунки. Галерея же... тупо набор картинок... на кой чёрт им вообще уникальные айдишники? Тьфу, блин.

Огромное спасибо!

[Kadzi]

Ivan Bogachev привет, если не трудно, хочу ваш коммент по данному вопросу Идеальный алгоритм вёрстки сайта?

[Ivan Bogachev]

Kadzi, там вроде и так ответили. Я могу лишь поддержать уже сказанное.

[ТемноКот]

Ivan Bogachev, извините, вопрос немного не по теме, но тоже к галерее.
Насколько кроссбраузерно сейчас column-count: ?
Смотрел тут https://caniuse.com/?search=column-count%3A ...вроде 96%, но в то же время некоторые браузеры вообще не поддерживают.

[Ivan Bogachev]

ТемноКот, должна быть разумная кроссбраузерность. Определяется отношением расходов на поддержку старых браузеров к потенциальной прибыли от клиентов, которые на них сидят. Смотрите, какие браузеры есть у ваших пользователей, и исходя из этого решайте, нужны они вам, или можно на них забить. Тут ничего личного, только бизнес.

У меня до недавнего времени была поддержка IE11 везде. Сейчас, в последний год, все чаще заходит разговор о том, что можно дропнуть вообще все версии IE/Edge, которые были до перехода его на хромиумный движок, т.к. реальных клиентов среди этих пользователей-динозавров по статистике почти нет. Но я сижу в "модной" нише. В энтерпрайзе, в окологосударственных структурах вполне могут IE9 поддерживать и какой-то древний софт на флеше, потому что его нельзя так просто обновить или переписать. Веб-разработка - понятие растяжимое, смотрите все по своим проектам.

P.S.: Еще можно использовать browserslist + doiuse, чтобы меньше думать при написании кода. Определили один раз список браузеров для поддержки - и все будет проверяться на совместимость автоматически.

[ТемноКот]

Понял, спасибо. (за browserslist + doiuse отдельное сенкью, не знал о столь полезной штуке)
И ещё потревожу, если позволите. Нет ли где на просторах тырнета чёткого списка или таблички для чайников? Что-то вроде:
"Массовый пользователь (список браузеров на которых обычные люди сидят)"
"Мобильный пользователь (список браузеров)"
"Старые версии (список олдфагов)"
А то "протыкивать" статистику по каждому браузеру, да ещё с учётом версий...

[Ivan Bogachev]

ТемноКот, не думаю, что есть вариант для чайников. Вакансии аналитиков не случайно появляются. В разных нишах распределение пользователей по браузерам разное + если для маленького магазинчика 1% пользователей какого-то старого браузера принесет N денег в год, а разработка сайта с учетом него выйдет в 5*N денег - это не то же самое, что крупная компания, у которой 1% клиентов принесет 100*N денег, при той же стоимости разработки.