使用blob svg可以实现弹出效果吗？

Question

我在这个问题上很挣扎。我找到了一篇文章：

https://css-tricks.com/lets-create-an-image-pop-out-effect-with-svg-clip-path/

，我已经尝试过这些步骤。问题是我使用 blob 作为

maskBackground

，我的路径遇到了一些问题。我想使用我拥有的 svg 来实现弹出效果。

这是我的 svg：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#FF0066" d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z" transform="translate(100 100)" />
</svg>

这是完整的 svg：

    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="image">
        <defs>
            <clipPath id="maskImage" clipPathUnits="userSpaceOnUse">
                <path d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z" transform="translate(100 100)" />
              </clipPath>
            <clipPath id="maskBackground" clipPathUnits="userSpaceOnUse">
              <path d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z" transform="translate(100 100)" />
            </clipPath>
          </defs>
        <g clip-path="url(#maskImage)" transform="translate(0 -7)">
            <!-- Background image -->
            <image clip-path="url(#maskBackground)" width="120" height="120" x="70" y="38" href="./resources/images/blob.svg" transform="translate(-90 -31)" />
        <!-- Foreground image -->
        <image width="120" height="144" x="-15" y="0" fill="none" class="image__foreground" href="./resources/images/dog.png" />
        </g>
</svg>

Answer 1

1. 您有 2 个相同的 ClipPath，您只需要一个。您可以根据需要多次应用 ClipPath。
2. 您正在剪切一个组，然后剪切其中的图像。为什么？
3. 你有很多变换翻译。您正在来回转换路径、图像和组。

在下一个示例中，我将简化您的代码。

• 我只保留一个clipPath，
• 我已删除群组
• 我删除了所有转换，只翻译剪切的图像。

为了了解用于剪辑的路径的大小，我使用 getBBox() 方法。这给了我

"x": -72.25780487060547,
"y": -48.919960021972656,
"width": 136.5255584716797,
"height": 121.35723876953125

图像大小应相同或更大。在本例中，我使用图像宽度=“200”高度=“252”。

由于用于剪切的路径具有“x”：-72.25780487060547和“y”：-48.919960021972656，所以我给图像赋予负x和y，类似于剪切路径边界框的x和y。

作为一种调试方法，它有助于在图像上绘制剪切路径。这将帮助您形象化您想要实现的结果。

最后，剪辑后，我将图像翻译到我想要的位置。

//console.log(m.getBBox())

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="image">
        <defs>
            <clipPath id="maskImage" clipPathUnits="userSpaceOnUse">
                <path id="m" d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z"  />
              </clipPath>
          </defs>
 
            <!-- Background image -->
            <image clip-path="url(#maskImage)" width="200" height="252" x="-73" y="-49" href="https://assets.codepen.io/222579/imgres.jpg" transform="translate(100 50)" />
        
</svg>