JavaScript — Добавление изображения в SVG Shape с различными типами заливки

Добавление изображения в SVG Shape с различными типами заливки

Я пытаюсь добавить изображение внутри фигуры SVG с различными типами заливки. Я могу добавить изображение в путь SVG, используя шаблон, используя следующий код.

 {amp}lt;svg viewBox="109 101 382 232" preserveAspectRatio="none" class="autoshape-svg"{amp}gt; {amp}lt;defs{amp}gt; {amp}lt;pattern id="image_5317" height="100%" width="100%" patternUnits="objectBoundingBox"{amp}gt; {amp}lt;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" /{amp}gt; {amp}lt;/pattern{amp}gt; {amp}lt;/defs{amp}gt; {amp}lt;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;" /{amp}gt; {amp}lt;/svg{amp}gt; 

Вышеуказанное изображение растягивается по фигуре. Я хочу добавить изображение в 5 разных фитингах.

  • Плитка Изображение будет повторяться внутри фигуры svg, начиная с левой верхней части фигуры.
  • Заполнить Изображение будет заполнено в форме SVG, сохраняя соотношение сторон
  • Подгонка Изображение будет точно соответствовать ширине или высоте поля содержимого, сохраняя соотношение сторон.

  • Размер оригинала Изображение будет сохранено в центре фигуры svg в исходном размере.

  • Растянуть Изображение будет растянуто по сторонам поля содержимого

Как я могу получить вышеуказанные типы заливки в форме SVG?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector