title: Vuejs + Vuetify include an image inside an svg circle
body: <p>i'm actually trying to figure out how to do something like the image below with Vuetify.</p>
  
  <p><a href="https://i.stack.imgur.com/kJgWt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kJgWt.png" alt="enter image description here"></a></p>
  
  <p>So i tried a bunch of things but no ones worked. This is my last try :</p>
  
  <pre><code>&lt;v-flex
    xs12
    sm4
    md4
    align-center
    justify-center
    text-xs-center&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" class="dotted-circle"&gt;
      &lt;circle cx="150" cy="150" r="75"&gt;
        &lt;v-img
          :src="profilePic"
          aspect-ratio="1"
          max-height="100"
          max-width="100"
          class="grey lighten-2 rounded-img"&gt;
        &lt;/v-img&gt;
      &lt;/circle&gt;
    &lt;/svg&gt;
  &lt;/v-flex&gt;
  </code></pre>
  
  <p>But this is just showing me my dotted circle and my image seem to be hidden behind it. There's the result :</p>
  
  <p><a href="https://i.stack.imgur.com/1pKAx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1pKAx.png" alt="enter image description here"></a></p>
  
  <p>And the html result :</p>
  
  <p><a href="https://i.stack.imgur.com/WyBz6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WyBz6.png" alt="enter image description here"></a></p>
  
  <p>I don't know what i'm doing wrong.</p>