I can't frame this image inside an SVG

Question

I want to wrap this

inside

this SVG cloud shape

to achive a result similar to

_{(source: i.ibb.co)}

it is to say, the t-shirt should be cropped inside the cloud, following its path.

I tried to use a CSS border mask, but I was not successful:

.wrapper {
  background-image:url('https://svgshare.com/i/T9J.svg');
  background-repeat:no-repeat;
  background-size:200px;
  background-position:50% 50%;
  width:200px;
}

.svg-border-mask {
  -webkit-mask-box-image: url('https://svgshare.com/i/T9J.svg');
  mask-border: url('https://svgshare.com/i/T9J.svg');
}

<div class="wrapper">
   <img src="https://i.stack.imgur.com/2GKtb.png" alt="" class="svg-border-mask" />
</div>

How can I do it? I read about the clip-path way too, but I don't know how to draw this SVG path...

Create the cloud shape in SVG then fill the image with a pattern where the pattern contents are the image you want to put into the cloud shape. — Robert Longson, Dec 11 '20 at 16:37
hi, the SVG link is broken, are you able to provide another link or the SVG itself? otherwise the question will look bad without the SVG — Temani Afif, Jan 14 '21 at 11:04

Temani Afif · Accepted Answer · 2021-01-14T11:15:42.723

3

Use mask not mask-border and apply the same properties as the background to have a perfect matching:

.wrapper {
  background-image:url('https://i.ibb.co/KjmqTs2/cloud.png');
  background-repeat:no-repeat;
  background-size:200px;
  background-position:50% 50%;
  -webkit-mask: url('https://i.ibb.co/KjmqTs2/cloud.png');
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:200px;
  -webkit-mask-position:50% 50%;
  width:200px;
}
img {
  max-width:100%;
}

<div class="wrapper">
   <img src="https://i.stack.imgur.com/2GKtb.png" alt="" class="svg-border-mask" />
</div>

You can also simplify like below:

img {
  --m:url('https://i.ibb.co/KjmqTs2/cloud.png') center/contain no-repeat;
 
  background:var(--m);
  -webkit-mask: var(--m);
  width:200px;
  padding:0 20px; /* some padding to control the shape */
}

<img src="https://i.stack.imgur.com/2GKtb.png" >

<img src="https://i.stack.imgur.com/2GKtb.png" style="width:100px;padding:0">

<img src="https://i.stack.imgur.com/2GKtb.png" style="width:100px;padding:0 30px">

edited Jan 14 '21 at 11:15

answered Dec 11 '20 at 19:16

Temani Afif

245,468
26
309
415

Let me invite you to a beer, man. You saved my day :) – Fran Dec 11 '20 at 20:16
Is there any way that the cloud border doesn't change its colour when it meets with the inner t-shirt? Originally the border was black, but in your example it gets somewhat grey. – Daniel Muñoz Parsapoormoghadam Dec 12 '20 at 11:57
1

@DanielMuñozParsapoormoghadam because the image is over the background, that's why. To do what you want you need at least two elements: the cloud with no border and the cloud with only border and you place the border on the top – Temani Afif Dec 12 '20 at 12:08

score 2 · Answer 2 · answered Dec 11 '20 at 17:46

A good reference is https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image but as I was new to this too I have seen how it works by taking the cloud SVG image given in the question and combining it with the given tshirt image.

Look at the code in this snippet which defines an img and uses it instead of the fill color on the first path in the given SVG. I've put it all inline so it's possible to see what is going on.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 342.33 210.05">
<defs>
  <style>.cls-1{fill:#00ffff;}.cls-2{fill:#d1d1d1;}</style>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="342.33" height="210.05">
    <image href="https://cdn.shopify.com/s/files/1/0520/4063/0437/products/img9_be295193-87ac-4d81-a55d-2353cbf5621d_250x.png" x="0" y="0" width="342.33" height="210.05" />
  </pattern></defs>
  <g id="Capa_2" data-name="Capa 2">
  <g id="Capa_1-2" data-name="Capa 1">
  <g id="Fill_24" data-name="Fill 24">
  <path  d="M337.32,112.06A56.17,56.17,0,0,1,320.21,152a50.61,50.61,0,0,1-58.44,9l-3-1.52-.6,3.3c-4.05,22.46-22.82,38.38-44.58,37.92-16.41-.37-31.29-10.12-38.84-25.47l-2.86-5.81-1.79,6.23C165,193.48,146.93,206.38,129,204.93c-19.83-1.65-37.72-17.08-43.53-37.59l-1.39-4.5-3,3.67a42.48,42.48,0,0,1-23.59,14.76A41.38,41.38,0,0,1,25.05,175a45.35,45.35,0,0,1-19-28.71A46.93,46.93,0,0,1,11.89,112C21.13,96.84,38,88.9,54.89,91.73l4.63.78-1.94-4.28A40,40,0,0,1,59.7,51,35.88,35.88,0,0,1,82.8,34.33a34.66,34.66,0,0,1,27,5.27,37.65,37.65,0,0,1,13.26,15.85l3.18,7.14,1.55-7.66C133.35,27.57,157.66,6.12,184.33,5c30.07-1.19,59.39,18.76,71.34,48.54.78,1.82,1.43,3.65,2.16,5.84l.92,2.76,2.59-1.33a50.69,50.69,0,0,1,24.07-5.54C314.53,56,337.82,81.42,337.32,112.06Z" fill="url(#img1)" />
  <path class="cls-2" d="M285.52,50.32a55.83,55.83,0,0,0-23.87,4.84c-.42-1.17-.87-2.35-1.36-3.5C247.58,20,216.27-1.21,184.13.05c-26.82,1.08-51.42,21.11-59.63,47.59a42.77,42.77,0,0,0-11.91-12.18,39.6,39.6,0,0,0-30.85-6,40.87,40.87,0,0,0-26.31,19,45.08,45.08,0,0,0-4,37.9C34,85,17.15,93.76,7.62,109.36a52,52,0,0,0-6.47,38,50.21,50.21,0,0,0,21.08,31.82,46.34,46.34,0,0,0,36.46,7A47.49,47.49,0,0,0,82.1,173c7.49,20.28,26.05,35.21,46.53,36.92,1.09.08,2.18.13,3.27.13,17.51,0,34-11.27,41.12-27.78a49.24,49.24,0,0,0,40.47,23.34c23.2.57,43.32-15.65,48.94-38.85a56.69,56.69,0,0,0,21.07,4.67,55.84,55.84,0,0,0,40.18-15.88,61.15,61.15,0,0,0,18.64-43.41c0-.35,0-.69,0-1C342.33,78.18,317.05,51,285.52,50.32Zm-1.9,116.11a51.31,51.31,0,0,1-21.85-5.51l-3-1.52-.6,3.3c-4.05,22.46-22.82,38.38-44.58,37.92-16.41-.37-31.29-10.12-38.84-25.47l-2.86-5.81-1.79,6.23C165,193.48,146.93,206.38,129,204.93c-19.83-1.65-37.72-17.08-43.53-37.59l-1.39-4.5-3,3.67a42.48,42.48,0,0,1-23.59,14.76A41.38,41.38,0,0,1,25.05,175a45.35,45.35,0,0,1-19-28.71A46.93,46.93,0,0,1,11.89,112C21.13,96.84,38,88.9,54.89,91.73l4.63.78-1.94-4.28A40,40,0,0,1,59.7,51,35.88,35.88,0,0,1,82.8,34.33a34.66,34.66,0,0,1,27,5.27,37.65,37.65,0,0,1,13.26,15.85l3.18,7.14,1.55-7.66C133.35,27.57,157.66,6.12,184.33,5c30.07-1.19,59.39,18.76,71.34,48.54.78,1.82,1.43,3.65,2.16,5.84l.92,2.76,2.59-1.33a50.69,50.69,0,0,1,24.07-5.54c29.12.65,52.41,26.11,51.91,56.75A56.17,56.17,0,0,1,320.21,152,51,51,0,0,1,283.62,166.43Z"/>
  </g>
  </g>
  </g>
  </svg>

I can't frame this image inside an SVG

2 Answers2

Linked