CODEWITHSUNDEEP
javascripthtmlcsssvg
CloudChing
CloudChing

Reputation: 33

How to 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 = "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

Upvotes: 1

Views: 1698

Answers (1)

Alexander
Alexander

Reputation: 4527

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.

Upvotes: 5

Related Questions