how can I set my Image inside SVG using css?

Question

hello i am new in Web development.

I want my image set proper inside SVG, but have faced problem I can't do this, I show so many question in stackoverflow but those question not my type that why I ask.

hear is my code

.home__data{
  background-color: red;
}
.home__data  svg{
  height: 509px;
  width: 534px;
  position: absolute;
  top: 150px;
  right: -44px;
  z-index: 1000;
  
}
.home__data  svg path{
  fill: none;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1;
  
}

img{
  position: absolute;
right: 65px;
top: 201px;
height: 330px;
width: 374px;
}

<div class="home__data">
            <svg viewBox="0 0 200 200" height="200px" width="300px" xmlns="http://www.w3.org/2000/svg">
                <path fill="#fff"
                    d="M48.9,-42.4C60.8,-24.1,66.1,-3.9,60.7,11.5C55.3,26.8,39.2,37.4,22.9,43.8C6.6,50.2,-9.9,52.5,-29.8,48.2C-49.8,43.8,-73.2,32.9,-81.3,13.8C-89.5,-5.3,-82.4,-32.7,-66.3,-51.9C-50.2,-71.1,-25.1,-82.2,-3.3,-79.6C18.5,-76.9,37,-60.6,48.9,-42.4Z"
                    transform="translate(100 100)" /> 
            </svg>
            
        </div>
        <img src="https://img.freepik.com/free-photo/young-handsome-man-with-beard-isolated-keeping-arms-crossed-frontal-position_1368-132662.jpg?size=626&ext=jpg" alt="">

But i want like this(This is edit photo using paint, if you don't understand sorry for this and ask me I try to better).

Thankyou...

I think we can use `clip-path` for this, don't sure 100% if it will work — Laaouatni Anas, Jan 05 '22 at 18:49
https://stackoverflow.com/questions/30897108/how-can-i-display-an-image-inside-svg-circle-in-html5 — Laaouatni Anas, Jan 05 '22 at 20:54

score 1 · Accepted Answer · answered Jan 06 '22 at 16:29

The simplest solution is to move the image into the SVG. Then use an SVG <clipPath> to clip it to your frame shape.

To simplify the SVG, here's what I have done:

Since the frame and the clipping path are the same shape, I have put the <path> into a <defs> (definitions) block, so that the two places that use it can share the path definition. We use SVG <use> elements to reference the path.
I've updated the viewBox so that it fits the frame shape. And adjusted coordinates and transforms to suit. Now the SVG can be placed anywhere you want on the page without worrying about unexpected padding etc.

.home__data{
  background-color: red;
}
.home__data  svg{
  height: 509px;
  width: 534px;
  position: absolute;
  top: 150px;
  right: -44px;
  z-index: 1000;
  
}
.home__data svg .frame{
  fill: none;
  fill-opacity:1;
  stroke:#1a1a1a;
  stroke-width:2px;
  stroke-opacity:1;
}

svg{
  display: block;
  position: absolute;
  right: 65px;
  top: 201px;
  width: 374px;
}

<div class="home__data">
  <svg viewBox="0 0 148 131">
    <defs>
      <!-- Shared path definition for both the clip path and the rendered frame -->
      <path id="frame-path"
            d="M48.9,-42.4C60.8,-24.1,66.1,-3.9,60.7,11.5C55.3,26.8,39.2,37.4,22.9,43.8C6.6,50.2,-9.9,52.5,-29.8,48.2C-49.8,43.8,-73.2,32.9,-81.3,13.8C-89.5,-5.3,-82.4,-32.7,-66.3,-51.9C-50.2,-71.1,-25.1,-82.2,-3.3,-79.6C18.5,-76.9,37,-60.6,48.9,-42.4Z"
            transform="translate(85 80)" /> 
      
      <!-- Clipping path used to trim unwanted parts of the image -->
      <clipPath id="frame-clip">
        <use xlink:href="#frame-path"/>
      </clipPath>
    </defs>

    <!-- Draw the image clipped to the frame shape -->
    <image xlink:href="https://img.freepik.com/free-photo/young-handsome-man-with-beard-isolated-keeping-arms-crossed-frontal-position_1368-132662.jpg?size=626&ext=jpg"
           x="0" y="0" width="148" height="131"
           preserveAspectRatio="xMidYMid slice"
           clip-path="url(#frame-clip)"/>

    <!-- Draw the frame on top of the image -->
    <use xlink:href="#frame-path" class="frame"/>
  </svg>
            
</div>

how can I set my Image inside SVG using css?

1 Answers1