Добавить изображение в фигуру SVG с анимацией

Question

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

.marker {
  motion-path: path('M 5.1 22.1 m 18, 0  a 18,18 0 1,0 -36,0');
  offset-path: path('M 5.1 22.1 m 18, 0  a 18,18 0 1,0 -36,0');
  animation: move 9s linear infinite;
}

@keyframes move {
  100% {
    motion-offset: 100%;
    offset-distance: 100%;
  }
}

<svg class="align-self-end" viewbox="0,0 10,10" width="100%" height="100%">
  <defs >
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="image/720x469-imperial-hotel-rooms-standard-double-5_04.jpg "  width="100%" height="100%"  />
    </pattern>
  </defs>
  <path 
    fill="none"
    stroke-width="0.1"
    stroke="#000000" 
    stroke-dasharray="0.5,0.2"
    d="M 5.1 22.1 m 18, 0  a 18,18 0 1,0 -36,0"
  />
  <circle 
    class="marker" 
    stroke-width="0.1" 
    stroke="#000000" 
    stroke-dasharray="0.5,0.2" 
    r="3.2" 
    fill="url(#img1)"
  />
</svg>