Я пытаюсь динамически заполнить фон фигур 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.