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

Доброго времени суток!
Имеется вот такой код
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 назначать маску?
А нельзя ли как-то упростить?
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега HTML
Creative frontend developer
А нельзя ли как-то упростить?


На вкус и цвет, конечно, но я бы первым делом избавился от всех этих 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, и следить, чтобы они случайно не продублировались при сборке страницы, а то начнется магия.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
07 мая 2021, в 11:09
100000 руб./за проект
07 мая 2021, в 11:08
45000 руб./за проект
07 мая 2021, в 11:06
10000 руб./за проект