如何在svg中剪切图像

Posted 2023-03-23

【中文标题】如何在svg中剪切图像

【英文标题】：How to clipping image in svg

【发布时间】：2021-07-18 05:39:36

【问题描述】：

如何在 svg 的黑色背景中添加图像叠加层（线条必须叠加）？在示例中，您可以看到我几乎完成了

正确的svg：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="6 8 101 98">
    <g id="Grafisch-element---zwart---smart" stroke="none" stroke- fill="none" fill-rule="evenodd">
        <path d="M61.5,104 C86.6289561,104 107,83.6851049 107,58.6254118 C107,33.5657187 78.0465356,8 52.9175795,8 C27.7886234,8 16,33.5657187 16,58.6254118 C16,83.6851049 36.3710439,104 61.5,104 Z" id="Oval-Copy-10" fill="#000000"/>
        <path d="M51.5,15.9 C39.1834288,15.9 28.0326258,20.8619717 19.9611234,28.8851355 C11.8915835,36.9063486 6.90000004,47.9874214 6.90000004,60.2275098 C6.90000004,73.9162468 7.92111543,86.3511139 13.1337943,94.6817587 C17.2084084,101.193605 23.8906017,105.1 34.6409154,105.1 C47.971902,105.1 64.7440729,99.1623584 77.4205397,89.8576443 C88.2218731,81.9293058 96.1,71.540767 96.1,60.2275098 C96.1,47.9874214 91.1084165,36.9063486 83.0388766,28.8851355 C74.9673742,20.8619717 63.8165712,15.9 51.5,15.9 Z" id="Oval-Copy-11" stroke="#E1E1E1" stroke-/>
    </g>
</svg>

我的代码：

.svg 
  position: absolute;
  width: 0;
  height: 0;

.clipped 
  width: 100%;
  height: 350px;
  background: turquoise url(https://source.unsplash.com/600x600?summer);
  background-size: cover;
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);

<svg class="svg">
    <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.676,1 C0.952,1,1,0.872,1,0.611 C1,0.35,0.858,0.083,0.582,0.083 C0.305,0.083,0.176,0.35,0.176,0.611 C0.176,0.872,0.4,1,0.676,1"></path></clipPath>
  <path d="M51.5,15.9 C39.1834288,15.9 28.0326258,20.8619717 19.9611234,28.8851355 C11.8915835,36.9063486 6.90000004,47.9874214 6.90000004,60.2275098 C6.90000004,73.9162468 7.92111543,86.3511139 13.1337943,94.6817587 C17.2084084,101.193605 23.8906017,105.1 34.6409154,105.1 C47.971902,105.1 64.7440729,99.1623584 77.4205397,89.8576443 C88.2218731,81.9293058 96.1,71.540767 96.1,60.2275098 C96.1,47.9874214 91.1084165,36.9063486 83.0388766,28.8851355 C74.9673742,20.8619717 63.8165712,15.9 51.5,15.9 Z" id="Oval-Copy-11" stroke="#E1E1E1" stroke-/>
</svg>
    
<div class="clipped"></div>

https://jsfiddle.net/yfLbka6x/

【问题讨论】：

您只想将背景从白色更改为黑色？

不，我想用图像（带剪辑）替换正确 svg 中的黑色图形，并将线条作为叠加层

【参考方案1】：

试试这样：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="6 8 101 98">
  <defs>
    <path d="M61.5,104 C86.6289561,104 107,83.6851049 107,58.6254118 C107,33.5657187 78.0465356,8 52.9175795,8 C27.7886234,8 16,33.5657187 16,58.6254118 C16,83.6851049 36.3710439,104 61.5,104 Z" id="Oval-Copy-10" fill="#000000" />
  </defs>
  <clipPath id="my-clip-path">
    <use href="#Oval-Copy-10" />
  </clipPath>
  <g id="Grafisch-element---zwart---smart" stroke="none" stroke- fill="none" fill-rule="evenodd">
    <image   href="https://source.unsplash.com/600x600?summer" clip-path="url(#my-clip-path)" />
    <path d="M51.5,15.9 C39.1834288,15.9 28.0326258,20.8619717 19.9611234,28.8851355 C11.8915835,36.9063486 6.90000004,47.9874214 6.90000004,60.2275098 C6.90000004,73.9162468 7.92111543,86.3511139 13.1337943,94.6817587 C17.2084084,101.193605 23.8906017,105.1 34.6409154,105.1 C47.971902,105.1 64.7440729,99.1623584 77.4205397,89.8576443 C88.2218731,81.9293058 96.1,71.540767 96.1,60.2275098 C96.1,47.9874214 91.1084165,36.9063486 83.0388766,28.8851355 C74.9673742,20.8619717 63.8165712,15.9 51.5,15.9 Z" id="Oval-Copy-11" stroke="#E1E1E1" stroke- />
  </g>
</svg>

【讨论】：

谢谢，它有效。有时页面上的图像是空的（白色）你知道为什么吗？

在图像加载之前它是白色的。您可以将最终图像包含为 base64 URL 来解决这个问题。