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

Question

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 = "40%" cy = "20%" r = "20" fill = "url(#image2)"  stroke-width ="2px" stroke="red"/>
</svg>

this could not work,the second circle has no image for its fill

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? i just want to show different image(ps:circle shape) and add different outline

What are you trying to do? The second circle is in exactly the same place as the first, so it will hide the first one. I am not sure what you mean by "the second circle is fill nothing". Do you mean that the second circle has no image for its fill? — Paul LeBeau, Jun 21 '17 at 13:26
yes,the second circle has no image for its fill. even different position,only first Pattern work — CloudChing, Jun 22 '17 at 05:50
The image elements have no height and width. Only Chrome supports this at the moment AFAIK as it's a new feature of SVG 2. — Robert Longson, Jun 22 '17 at 06:18

Alexander · Accepted Answer · 2017-06-22T06:31:47.737

Use objectBoundingBox in patternUnits attribute value instead of userSpaceOnUse. Also you need to declare xlink namespace. Thus, try to use following:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="660">   
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" xlink:href="https://www.gravatar.com/avatar/31497e3c546c438c4eea4b68d6f9f027?s=32&d=identicon&r=PG&f=1"></image>
    </pattern>   
    <pattern id="image2" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" xlink:href="https://lh5.googleusercontent.com/-x_BhuHcC8Ww/AAAAAAAAAAI/AAAAAAAAABg/hiPWIjRXbhI/photo.jpg?sz=64"></image>
    </pattern>   
  </defs>   
  <circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)"  stroke-width ="2px" stroke="red"/> 
  <circle cx = "40%" cy = "20%" r = "20" fill = "url(#image2)"  stroke-width ="2px" stroke="red"/>
</svg>

If you run the code snippet, then you will see, that your profile icon is displayed in first circle, and my - in the second.

thanks a lot ! very helpful ! my most sincere respects and God bless you — CloudChing, Jun 22 '17 at 07:10

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

1 Answers1