在 SVG blob 中插入图像

Posted 2023-03-22

【中文标题】在 SVG blob 中插入图像

【英文标题】：Inserting image inside SVG blob

【发布时间】：2022-01-04 03:55:28

【问题描述】：

我想要实现的是将图像放置在 SVG blob 中。问题是图像不在 blob 内部，而是在 blob 的边界上“突出”。我的目标是不在 blob 之外显示图像。任何帮助将不胜感激。

  <svg id="visual" viewBox="0 0 500 500"   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
               <rect x="0" y="0"   fill="#fff">                 
               </rect>
               <g transform="translate(292.7 145.85)">
                 <path id="svg1" 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">
                  </path>
                  
                </g><image  xlink:href="https://www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background.png" x="0" y="0"   clip-path="url(#svg1)" preserveAspectRatio="xMidYMid slice"/>
              </svg> 

【参考方案1】：

我认为你需要使用<clipPath>

您正在寻找这样的东西吗？

这是一个可以应用于代码的 sn-p 示例

body 
  background: #EDE29F;


svg 
  display: block;
  margin-left: auto;
  margin-right: auto;

<svg   viewBox="0 0 500 500">

   <clipPath id="clip-path">
 <path d="M22.154,108.389 L258.274,13.5 L449.156,151.421 L487.774,429.469 L211.933,472.5 L30.981,366.577 L22.154,108.389 z">
   </clipPath>
<!-- xlink:href for modern browsers, src for IE8- -->
<image clip-path="url(#clip-path)" xlink:href="https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg"  src="https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg"    class="svg__image">       
  
</svg>

【讨论】：

是的，这正是我想要的。我是 SVG 的新手，我看到在某些情况下有 clippath，有时没有。你能把它应用到我的斑点形状上吗？谢谢

如果我将d=.... 应用于您的代码，我会得到奇怪的结果。