带有图像和填充的 SVG 剪贴路径答案

【问题标题】：SVG clippath with image and fill带有图像和填充的 SVG 剪贴路径
【发布时间】：2022-01-04 15:45:59
【问题描述】：

我的目标是fill SVG 的背景为#2590eb 颜色。我不知道为什么它不起作用。图片为透明png。尝试将图片调整为更小的宽度，但它不起作用。任何帮助将不胜感激。

              <svg width="500" height="500" viewBox="0 0 500 500">

                <clipPath id="clip-path" transform="translate(292.7 145.85)">
                  <path d="M189.3 52.1C189.3 166.7 94.7 333.3 -21.3 333.3C-137.3 333.3 -274.7 166.7 -274.7 52.1C-274.7 -62.5 -137.3 -125 -21.3
               -125C94.7 -125 189.3 -62.5 189.3 52.1" fill="#2590eb" >
                </clipPath>
             <!-- xlink:href for modern browsers, src for IE8- -->
             <image clip-path="url(#clip-path)" xlink:href="https://www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background.png" x='50'  src="https://www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background.png" alt="Image" height="500" width="500" class="svgImg">       
               
             </svg>

【问题讨论】：

一个 clipPath 只是剪辑东西，它要么剪辑要么不剪辑。您是在寻找口罩吗？

标签： html svg

【解决方案1】：

由于在 clipPath 中使用了填充路径，因此您看不到它。在下一个示例中，我在图像元素之前使用了带有 use 的路径。

我还通过更改 svg 元素的 viewBox 消除了您的变换。

<svg width="500" height="500" viewBox="-292.7 -145.85 500 500">

  <clipPath id="clip-path">
    <path id="thePath" d="M189.3 52.1C189.3 166.7 94.7 333.3 -21.3 333.3C-137.3 333.3 -274.7 166.7 -274.7 52.1C-274.7 -62.5 -137.3 -125 -21.3 -125C94.7 -125 189.3 -62.5 189.3 52.1" fill="#2590eb" />
  </clipPath>

  <use xlink:href="#thePath" />

  <image clip-path="url(#clip-path)" xlink:href="https://www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background.png" x='-300' y="-150" height="500" width="500" class="svgImg" />

</svg>

【讨论】：