Почему не работает clipPath для изображения?

Question

<svg width='400' height='400' style='border: 1px solid black'>
<defs>
   <clipPath  id='a'>
      <circle r="30" cy="100" r="90" />
  </clipPath >
</defs>  
  <image x="15%" y="35" width="250" height="250"
      clip-path="url(#a)" xlink:href="https://ibb.co/T0yn3RX"/>
</svg>

Answer 1

Я полагаю потому что дело было глубокой ночью и Вы вместо "cx" для круга поставили второй раз "r"

<svg width='400' height='400' style='border: 1px solid black'>
<defs>
   <clipPath  id='a'>
      <circle r="90" cy="100" cx="90" />
  </clipPath >
</defs>  
  <image x="15%" y="35" width="250" height="250"
      clip-path="url(#a)" xlink:href="https://ibb.co/T0yn3RX"/>
</svg>

PS: а еще путь до картинки ведет не на картинку а на веб страницу..

Answer 2

Не был указан атрибут circle cx

И адрес картинки нужен https://i.ibb.co/1XcpWKV/0E5BJ.png

<svg width='400' height='400' style='border: 1px solid black'>
<defs>
   <clipPath  id='a'>
      <circle cx="90" cy="100" r="90" />
  </clipPath >
</defs>  
  <image x="15%" y="35" width="250" height="250"
      clip-path="url(#a)" xlink:href="https://i.ibb.co/1XcpWKV/0E5BJ.png"/>
</svg>

БЛОГ НА HUSL

Почему не работает clipPath для изображения?

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