CodePen Embed - svg里的圆形图片

<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" height="100" width="100" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkLQ9VCp6971nvEvpq0IFzP4E50zMGwDUL6Q&usqp=CAU"></image>
    </pattern>
  </defs>
  <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/>
</svg>

svg {
  width: 200px;
  height: 200px;
}

This Pen is owned by Blackman99 on CodePen.

See more by @blackman99 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.