SVG круг с изображением внутри не работает на мобильном телефоне

Question

У меня есть код

<svg class="circle-chart in-view" version="1.1" viewBox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle class="circle-chart-background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
  <defs>
    <pattern id="image2" patternUnits="userSpaceOnUse" height="100" width="100">
      <image xlink:href="/hoangnguyenwp/wp-content/themes/hoangnguyenwp/images/web-shop.png" x="50%" y="50%" height="32" width="32" transform="translate(-35.5,-31)"></image>
    </pattern>
  </defs>
  <circle class="circle-chart-circle circle-shop" stroke="#E91E63" stroke-width="2" stroke-linecap="round" fill="url(#image2)" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
</svg>

с изображением внутри круга

<defs>
  <pattern id="image2" patternUnits="userSpaceOnUse" height="100" width="100">
    <image xlink:href="/hoangnguyenwp/wp-content/themes/hoangnguyenwp/images/web-shop.png" x="50%" y="50%" height="32" width="32" transform="translate(-35.5,-31)"></image>
  </pattern>
</defs>

но на мобильном телефоне изображение не отображается Что не так с моим кодом?