我无法在 SVG 中构建此图像

Question

我想包装这个

里面

获得类似于

的结果

也就是说，T恤应该在云中裁剪，跟随它的路径。

我尝试使用 CSS 边框遮罩，但没有成功：

.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 路径...

Answer 1

一个很好的参考是但由于我也是新手，所以我已经了解了它是如何工作的，方法是将问题中给出的云 SVG 图像与给定的 T 恤图像结合起来。

查看此代码段中的代码，它定义了一个 img 并使用它代替给定 SVG 中第一个路径上的填充颜色。我已将其全部内联，因此可以查看发生了什么。

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

Answer 2

使用 mask 而不是 mask-border 并应用与背景相同的属性以获得完美匹配：

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

你也可以像下面这样简化：

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 中构建此图像

I can't frame this image inside an SVG

css

svg

clip-path

css-mask