Я пытаюсь добавить изображение внутри фигуры SVG с различными типами заливки. Я могу добавить изображение в путь SVG, используя шаблон, используя следующий код.
<svg viewBox="109 101 382 232" preserveAspectRatio="none" class="autoshape-svg">
<defs>
<pattern id="image_5317" height="100%" width="100%" patternUnits="objectBoundingBox">
<image height="100%" width="100%" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://www.gstatic.com/webp/gallery/1.jpg" />
</pattern>
</defs>
<path d="M109,101L109,333L491,333L491,101L109,101Z" id="svg-path" fill="url(#image_5317)" fill-opacity="1" stroke="#1a1a1a" stroke-width="2px" style="vector-effect: non-scaling-stroke;" />
</svg>
Вышеуказанное изображение растягивается по фигуре. Я хочу добавить изображение в 5 различных фитингах.
- Плитка Изображение будет повторяться внутри фигуры svg, начиная с левой верхней части фигуры.
- Заполнить Изображение будет заполнено в форме svg, сохраняя соотношение сторон
Подогнать Изображение будет точно соответствовать ширине или высотеокно содержимого, сохраняя соотношение сторон.
Исходный размер Изображение будет сохранено в центре фигуры svg в своем первоначальном размере
Растянуть Изображение будет растянуто, чтобы соответствовать сторонам поля содержимого
Как я могу добиться указанных выше типов заливки в форме SVG