Как svg элементу растянуть задний фон?

Рейтинг: 2Ответов: 1Опубликовано: 09.06.2023

есть такая форма

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

                <defs>
                    <pattern id="image" patternUnits="userSpaceOnUse" width="100" height="100">
                      <image x="0" y="0"  width="100" height="100" xlink:href="1111111.jpg"></image>
                    </pattern>
                </defs>

                <path fill="url(#image)" d="M64.6,-24.3C72.3,2.6,59.1,32.9,38.5,46.4C17.8,59.9,-10.4,56.5,-29.7,42.2C-49,27.9,-59.4,2.6,-53,-22.6C-46.6,-47.7,-23.3,-72.7,2.6,-73.6C28.5,-74.4,57,-51.1,64.6,-24.3Z" transform="translate(100 100)"/>
            </svg>

введите сюда описание изображения

но задний фон не получается растянуть, сама картинка 1920x1080, может есть что-то вроде background-size: 100%; ?

css html svg
Источник: Stack Overflow на русском

Ответы

▲ 5Принят

Замените patternUnits="userSpaceOnUse" на patternUnits = "objectBoundingBox"
Задайте ширину и высоту в процентах

 <pattern id="image"  width="100%" height="100%">


<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

                <defs>
                    <pattern id="image" patternUnits = "objectBoundingBox"  width="100%" height="100%">
                      <image x="-20" y="0"  width="75%" height="75%" xlink:href="http://i.imgur.com/3DWAbmN.jpg"></image>
                    </pattern>
                </defs>

                <path fill="url(#image)"  d="M64.6,-24.3C72.3,2.6,59.1,32.9,38.5,46.4C17.8,59.9,-10.4,56.5,-29.7,42.2C-49,27.9,-59.4,2.6,-53,-22.6C-46.6,-47.7,-23.3,-72.7,2.6,-73.6C28.5,-74.4,57,-51.1,64.6,-24.3Z" transform="translate(100 100)"/>
            </svg>

Дополнительные возможности позиционирования и масштабирования, можно получить при оборачивании svg в контейнер

<div class="container">
   <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  ....
   </svg>
</div>

В этом случае блок svg может занимать весь контейнер и быть

С фиксированными размерами

.container {
width:200px;
height:200px;
<div class="container">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

                <defs>
                    <pattern id="image" patternUnits = "objectBoundingBox" width="100%" height="100%">
                      <image x="-20" y="0"  width="75%" height="75%" xlink:href="http://i.imgur.com/3DWAbmN.jpg"></image>
                    </pattern>
                </defs>

                <path fill="url(#image)"  d="M64.6,-24.3C72.3,2.6,59.1,32.9,38.5,46.4C17.8,59.9,-10.4,56.5,-29.7,42.2C-49,27.9,-59.4,2.6,-53,-22.6C-46.6,-47.7,-23.3,-72.7,2.6,-73.6C28.5,-74.4,57,-51.1,64.6,-24.3Z" transform="translate(100 100)"/>
            </svg>
</div>

C масштабированием в зависимости от размеров дисплея гаджета

.container {
width:45%;
height:45%;
<div class="container">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

                <defs>
                    <pattern id="image" patternUnits = "objectBoundingBox" width="100%" height="100%">
                      <image x="-20" y="0"  width="75%" height="75%" xlink:href="http://i.imgur.com/3DWAbmN.jpg"></image>
                    </pattern>
                </defs>

                <path fill="url(#image)"  d="M64.6,-24.3C72.3,2.6,59.1,32.9,38.5,46.4C17.8,59.9,-10.4,56.5,-29.7,42.2C-49,27.9,-59.4,2.6,-53,-22.6C-46.6,-47.7,-23.3,-72.7,2.6,-73.6C28.5,-74.4,57,-51.1,64.6,-24.3Z" transform="translate(100 100)"/>
            </svg>
</div>