У меня есть следующий SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="480" height="1080" version="1.1" viewBox="0 0 480 1080" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="wpi" width="100%" height="100%" patternUnits="userSpaceOnUse">
<image width="100%" height="100%" preserveAspectRatio="none" xlink:href="h_img.jpg" x="0" y="0"/>
</pattern>
</defs>
<rect class="wallpaper" width="100%" height="250" fill="url(#wpi)"/>
</svg>
h_img jpg может изменяться по времени, загружая разные изображения, поэтому я не могу заранее знать о его размере, но я знаю, что большинствовремя, его значение высоты больше, чем его ширина, но мне нужно применить его к прямоугольному элементу, который имеет меньшую высоту по сравнению с его собственной шириной, и это точно (несмотря на то, что я использую относительное значение 100% для этого). Мне нужен шаблон, чтобы заполнить этот прямоугольник изображением, сохраняя его пропорции и высоту по центру (или скрыть переполнение). Я знаю, что могу использовать JavaScript для вычисления относительной ширины изображения, соответственно изменить размер высотысохранить соотношение сторон и рассчитать смещение, необходимое для обеспечения центрирования (и я это сделал), но ... Знаете ли вы, возможно, есть ли способ сделать то, что мне нужно, просто используя правильные параметры в элементе SVG и нетJavaScript?
Я пробовал:
<pattern id="wpi" width="100%" height="100%" patternContentUnits="objectBoundingBox">
<image width="1" height="1" preserveAspectRatio="xMidYMid" xlink:href="h_img.jpg" x="0" y="0"/>
</pattern>
Но это не дает мне желаемого эффекта, который мне нужен ... Спасибо за вашу помощь
РЕШЕНОЕ РЕДАКТИРОВАНИЕ:
Благодаря @ccprog за его предложение привело меня в правильном направлении, мне удалось найти способ решить вот так:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="480" height="1080" viewBox="0 0 480 1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<pattern id="wpi" width="1" height="1">
<image width="100%" height="250" preserveAspectRatio="xMidYMid slice" xlink:href="h_img.jpg"/>
</pattern>
</defs>
<rect class="wallpaper" width="100%" height="250" fill="url(#wpi)"/>
</svg>
Примечание:вам нужно установить для <image> точно такие же значения height и width, используемые для контейнера изображения шаблона область (= это означает размер элемента, на котором будет создан шаблонприложенное,в данном случае это <rect>).
В качестве заключительных слов я скажу, что есть хотя бы пара причин, по которым я хотел, чтобы изображение оставалось примененным внутри шаблона:
во-первых, я могу использовать код javascript для смещения центра изображения на значения атрибутов y и x, оставляя при этом прямоугольник на своем месте;
и другая причина в том, что я мог бы легко изменить заливку прямоугольника на сплошной цвет, если мне нужно это сделать.