Vuejs + Vuetify включает изображение внутри круга svg

я на самом деле пытаюсь понять, как сделать что-то вроде изображения ниже с Vuetify.

Итак, я перепробовал кучу вещей, но ничего не сработало. Это моя последняя попытка:

<v-flex
  xs12
  sm4
  md4
  align-center
  justify-center
  text-xs-center>
  <svg xmlns = "http://www.w3.org/2000/svg" width = "300" height = "300" class = "dotted-circle">
    <circle cx = "150" cy = "150" r = "75">
      <v-img
        :src = "profilePic"
        aspect-ratio = "1"
        max-height = "100"
        max-width = "100"
        class = "grey lighten-2 rounded-img">
      </v-img>
    </circle>
  </svg>
</v-flex>

Но это просто показывает мне мой пунктирный круг, и мое изображение, кажется, скрыто за ним. Вот результат:

И результат html:

Я не знаю, что я делаю неправильно.