Add different background image (.png) to a SVG circle shape , and set stroke?

i alreay see the Add a background image (.png) to a SVG circle shape

but in my case ,i need to add stroke and stroke-width in different image shape

this is my code:

<svg width="700" height="660">   
<defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>   
    <pattern id="image2" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url2.png"></image>
    </pattern>   
</defs>   
 <circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)"  stroke-width ="2px" stroke="red"/> 
 <circle cx = "20%" cy = "20%" r = "20" fill = "url(#image2)"  stroke-width ="2px" stroke="red"/>
</svg>

this could not work,the secend circle is fill nothing

and this:

<svg width="700" height="660">
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="test_image.png"/>
    </filter>
    <circle filter="url(#this_image)" cx="180" cy="120" r="80" stroke-width ="2px" stroke="red"/>
</svg>

the stroke and stroke-width is useless

how can i do?