我无法在SVG内构图此图像 [英] I can't frame this image inside an SVG

问题描述

我想把它包起来

内部

获得类似于

也就是说，应该沿着云朵的路径将T恤裁剪到云端.

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

我尝试使用CSS边框蒙版，但未成功:

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>

我该怎么办?我也了解了 clip-path 的方式，但是我不知道如何绘制此SVG路径...

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

推荐答案

使用遮罩而不是遮罩边框，并应用与背景相同的属性以实现完美匹配:

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">

这篇关于我无法在SVG内构图此图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！