html - 使用动画将图像添加到 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>

标签： htmlcsssvg