Растянуть изображение по контейнеру

Question

<svg viewBox="0 0 10 10" style='height:100%'>
  <rect fill="rgb(93,59,174, 60%)" id="rect" x="18%" y="18%" width="64%" height="64%" rx="15"/></rect>
  <clipPath id="clip"><use xlink:href="#rect"/></clipPath> 
  <image xlink:href="https://i.ibb.co/DRKXhrt/1.webp" height="100%" clip-path="url(#clip)"/>
</svg>

Так понимаю изображение в блоке image, принимает высоту блока svg. Как выполнить так, чтобы ширину и высоту примула width="64%" height="64%", то есть окружности... Блока, а затем как бы принимала радиус.

Answer 1

Если я правильно понял вопрос, то вы хотите сделать размер картинки, такой же как и круга (rect), если так, то всё что вам нужно, это передать такие же атрибуты как у rect для image.

Демо

<svg viewBox="0 0 10 10" width="200">
  <image xlink:href="https://i.ibb.co/DRKXhrt/1.webp"  x="18%" y="18%" width="64%" height="64%"/>
  <rect fill="rgb(93,59,174, 60%)" id="rect" x="18%" y="18%" width="64%" height="64%" rx="15" stroke-width=".05" stroke="red"/>
</svg>

<svg viewBox="0 0 10 10" width="200">
  <rect fill="rgb(93,59,174, 60%)" id="rect" x="18%" y="18%" width="64%" height="64%" rx="15"/>
  <clipPath id="clip"><use xlink:href="#rect"/></clipPath> 
  <image xlink:href="https://i.ibb.co/DRKXhrt/1.webp"  x="18%" y="18%" width="64%" height="64%" clip-path="url(#clip)"/>
</svg>

БЛОГ НА HUSL

Растянуть изображение по контейнеру

Ответы (1 шт):