D3 Image SVG not showing

If you don't want to use a pattern you can instead clip the image with the circle.

In the next example I'm using a circle and an image both centered around the point x=0,y=0. Next I'm translating the image to the desired position, the one that in your code is the center of the circle. The image is clipped with the circle.

<svg viewBox="0 0 1100 600" style="background-color: steelblue;">

  <defs>
    <image id="chara_avatar" xlink:href="https://images.unsplash.com/photo-1490730141103-6cac27aaab94?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2070&amp;q=80" width="189.63000000000002" height="126.42000000000002" x="-94.185" y="-63.21"></image>
    <clipPath id="cp">
      <circle id="c" r="63.21000000000001" style="fill:red; stroke: black; stroke-width: 3px; cursor: pointer;"></circle>
    </clipPath>
  </defs>


    <use transform="translate(509,526.75)" xlink:href="#chara_avatar" clip-path="url(#cp)"></use>
    <use transform="translate(641.6925207050258,483.6355864801444)" xlink:href="#chara_avatar" clip-path="url(#cp)"></use>


</svg>

You can do the same for every circle.

This could be achieved by adding as many SVG <image> elements in appropriate location as circles needed.

Then you would use <clipPath> with <circle> inside them and "link" each circular clipPath to each <image>. Again the location of each circle should match the image it has to clip.

Attached a working codepen

Snippet:

<svg viewBox="0 0 1100 600" style="background-color: steelblue;">

  <defs>
    <clipPath id="clip-circle-0">
      <circle r="50" cx="100" cy="100"></circle>
    </clipPath>
  </defs>


  <image  href="https://images.unsplash.com/photo-1490730141103-6cac27aaab94?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2070&amp;q=80" x="50" y="50" width="100" height="100" style="clip-path: url(#clip-circle-0)"></image>


</svg>