3

Я пытаюсь динамически заполнить фон фигур SVG, размещенных на веб-странице, отображаемой на стороне сервера (отправляемая полностью в браузер). По сути, будет выбран случайный SVG и случайный набор изображений, выбранных для «заполнения» секций.

Обычно я знаю, что всегда будет нужно 9 штук svg. Я хочу, чтобы «пользователи» имели возможность загружать SVG - поэтому размеры не будут известны без анализа файла SVG. SVG может быть встроен в HTML-код сайта - я думаю, что это означает, что я могу определить внутренние атрибуты формы SVG с помощью CSS.

Однако, при пробывании нескольких вариантов CSS, ни один из них не сработал.

В настоящее время я использую Patterns и ссылаюсь на них из style = fill. Однако размеры изображений и SVG-прямоугольники в каждом из них будут разными по размеру и положению. Я просто не могу определить узор как 100% ширину и полностью заполнить форму.

В идеале я надеялся использовать встроенный CSS и использовать идентификаторы с помощью background-size: cover, чтобы просто масштабировать изображения внутри прямоугольника.

Кажется, я не могу сделать это с помощью patternfill (процентная ширина не работает)

Ниже приведен jsfiddle, в котором я сделал более упрощенный пример.

https://jsfiddle.net/adscjx1L/

Свободный перевод вопроса How to set an SVG RECT shape with a background image covering 100% - not tiling от участника @Elijha.

2

1 ответ 1

3

Я думаю, вы так можете переусердствовать. Просто используйте элемент изображения напрямую с preserveAspectRatio. Нет необходимости в шаблонах или фильтрах.

body{
  background-color: #eee;
}

#mask,#frame{
  box-shadow: 0px -2px 14px #0000007d;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="500.46px" viewBox="0 0 283.46 283.46">

        <path id="frame" fill="#FFFFFF" d="M141.284,20.828c-17.516,0-34.33,5.309-48.625,15.354C81.489,44.031,72.49,54.305,66.25,66.249
            c-11.944,6.24-22.218,15.239-30.066,26.409C26.14,106.953,20.83,123.767,20.83,141.282c0,17.517,5.31,34.33,15.354,48.623
            c7.849,11.171,18.123,20.169,30.067,26.411c6.24,11.942,15.239,22.218,26.409,30.064c14.295,10.045,31.109,15.354,48.625,15.354
            c17.518,0,34.332-5.31,48.625-15.354c11.169-7.847,20.168-18.122,26.41-30.064c11.941-6.242,22.216-15.24,30.065-26.409
            c10.042-14.295,15.352-31.108,15.352-48.625c0-17.516-5.309-34.33-15.352-48.623c-7.85-11.169-18.121-20.167-30.064-26.408
            c-6.241-11.944-15.239-22.219-26.41-30.068C175.616,26.138,158.802,20.828,141.284,20.828L141.284,20.828z"/>

    <defs>
  
        <path id="Mask" d="M238.746,141.282c0-26.354-16.534-48.835-39.789-57.669c-8.833-23.258-31.315-39.794-57.673-39.794
            c-26.355,0-48.839,16.534-57.672,39.791c-23.257,8.834-39.792,31.317-39.792,57.672c0,26.356,16.534,48.837,39.791,57.672
            c8.834,23.257,31.318,39.791,57.673,39.791s48.838-16.534,57.672-39.791C222.212,190.119,238.746,167.638,238.746,141.282z"/>
    </defs>
  
    <clipPath id="Mask_1_">
        <use xlink:href="#Mask"  overflow="visible"/>
    </clipPath>
  
    <g clip-path="url(#Mask_1_)">
        <image id="block1" x="43.82" y="43.819" preserveAspectRatio="xMidYMid slice"  xlink:href="https://images.unsplash.com/photo-1629268810152-b99c4f0ef937?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);" width="97.463" height="97.463"/>
        <image id="block2" x="141.283" y="43.819" preserveAspectRatio="xMidYMid slice" xlink:href="https://media.freestocktextures.com/cache/c3/d5/c3d5afbfcadee27d1452eec759ba8c26.jpg" width="97.463" height="97.463"/>
        <image id="block3" x="43.82" y="141.281" preserveAspectRatio="xMidYMid slice"  xlink:href="https://media.freestocktextures.com/cache/c3/d5/c3d5afbfcadee27d1452eec759ba8c26.jpg" width="97.463" height="97.464"/>
        <image id="block4" x="141.283" y="141.281"  width="97.463" height="97.464" xlink:href="https://media.freestocktextures.com/cache/fb/eb/fbeb11ab97712b303983cd3e22ae8f3a.jpg"
    preserveAspectRatio="xMidYMid slice"
    />
    
        <image id="block5" x="105.207" y="105.207" width="72.151" height="92.151" href="https://media.freestocktextures.com/cache/c3/d5/c3d5afbfcadee27d1452eec759ba8c26.jpg" preserveAspectRatio="xMidYMid slice"/>
    </g>

</svg>

Свободный перевод ответа от участника @Michael Mullany.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.