SVG image inside circle

Bla...

I want to create a circle which contains an image, I already tried using pattern or filter but none of them give me the expected result. Below is the code:

<svg id="graph" width="100%" height="400px">

  <!-- filter -->
  <filter id = "born1" x = "0%" y = "0%" width = "100%" height = "100%">
      <feImage xlink:href = "https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"/>
  </filter>
  <circle id = "born" class = "medium" cx = "5%" cy = "20%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" filter = "url(#born1)"/>
  
  <!-- pattern -->
  <defs>
    <pattern id="image" x="0" y="0"  height="100%" width="100%">
      <image x="0" y="0" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
    </pattern>
  </defs>
  <circle id = "sd" class = "medium" cx = "5%" cy = "40%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" fill="url(#image)"/>
</svg>

My goal is to preserve the circle and give background image inside it, something like CSS attr background-image.

Paul LeBeau

A pattern will work. You just have to give the <image> a size. Unlike HTML, SVG images default to width and height of zero.

Also, if you want the image to scale with the circle, then you should specify a viewBox for the pattern.

<svg id="graph" width="100%" height="400px">

  <!-- pattern -->
  <defs>
    <pattern id="image" x="0%" y="0%" height="100%" width="100%"
             viewBox="0 0 512 512">
      <image x="0%" y="0%" width="512" height="512" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
    </pattern>
  </defs>
    
  <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

SVG path inside circle

From Dev

Find elements inside circle in svg

From Dev

How can I display an image inside SVG circle in html5?

From Dev

MATLAB: Display image inside circle

From Dev

MATLAB: Display image inside circle

From Dev

Trying to center an svg circle inside a div

From Dev

svg draw circle with curved text inside

From Dev

How to add a link inside an svg circle

From Dev

svg draw circle with curved text inside

From Dev

Add color and image to fill of SVG circle

From Dev

How to set image on center of svg circle?

From Dev

How to make ImageButton a circle and to fit Uploaded Image inside that circle?

From Dev

How to crop image inside the circle in UIImageView in iOS

From Dev

how stretch inside a circle image with nine patch

From Dev

How to draw an image inside Rounded Rectangle or inside a shape like circle?

From Dev

How do I perfectly center a single character inside an SVG circle?

From Dev

How can I place text inside an SVG circle with React JS?

From Dev

How to draw a number centered inside a circle with inline svg?

From Dev

How to include angular JS expressions inside an SVG circle

From Dev

Google Chart Calendar how to mark date with circle inside -svg

From Dev

d3: svg image in zoom circle packing

From Dev

Place an Image inside a Polygon with Snap.svg

From Dev

Why is this image inside svg not being displayed?

From Dev

image inside svg width and height not working as expected

From Dev

Place an Image inside a Polygon with Snap.svg

From Dev

How to interpret the inside of a .svg vector image

From Dev

Cannot hover SVG image and text inside a div

From Dev

How can I fit a square HTML image inside a circle border?

From Dev

How to make an image inside a diamond shape morph to circle

Related Related

  1. 1

    SVG path inside circle

  2. 2

    Find elements inside circle in svg

  3. 3

    How can I display an image inside SVG circle in html5?

  4. 4

    MATLAB: Display image inside circle

  5. 5

    MATLAB: Display image inside circle

  6. 6

    Trying to center an svg circle inside a div

  7. 7

    svg draw circle with curved text inside

  8. 8

    How to add a link inside an svg circle

  9. 9

    svg draw circle with curved text inside

  10. 10

    Add color and image to fill of SVG circle

  11. 11

    How to set image on center of svg circle?

  12. 12

    How to make ImageButton a circle and to fit Uploaded Image inside that circle?

  13. 13

    How to crop image inside the circle in UIImageView in iOS

  14. 14

    how stretch inside a circle image with nine patch

  15. 15

    How to draw an image inside Rounded Rectangle or inside a shape like circle?

  16. 16

    How do I perfectly center a single character inside an SVG circle?

  17. 17

    How can I place text inside an SVG circle with React JS?

  18. 18

    How to draw a number centered inside a circle with inline svg?

  19. 19

    How to include angular JS expressions inside an SVG circle

  20. 20

    Google Chart Calendar how to mark date with circle inside -svg

  21. 21

    d3: svg image in zoom circle packing

  22. 22

    Place an Image inside a Polygon with Snap.svg

  23. 23

    Why is this image inside svg not being displayed?

  24. 24

    image inside svg width and height not working as expected

  25. 25

    Place an Image inside a Polygon with Snap.svg

  26. 26

    How to interpret the inside of a .svg vector image

  27. 27

    Cannot hover SVG image and text inside a div

  28. 28

    How can I fit a square HTML image inside a circle border?

  29. 29

    How to make an image inside a diamond shape morph to circle

HotTag

Archive