如何为SVG心形外部添加背景并保持内部透明？

完全可以实现这个需求，核心思路是利用SVG的<mask>遮罩功能，先定义一个“挖空心形”的遮罩，再用这个遮罩给背景矩形做裁剪，就能实现外部有背景、心形内部透明的效果。

以下是修改后的完整SVG代码：

<svg width="23" height="23" viewBox="0 0 23 21" fill="none" class="card__icone__default" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义遮罩：先画全屏矩形（显示区域），再画心形（挖空区域） -->
  <mask id="heartMask">
    <rect width="100%" height="100%" fill="white"/>
    <path d="M20.3647 1.43666C18.01 -0.752399 14.5081 -0.358649 12.3468 2.07416L11.5003 3.02573L10.6538 2.07416C8.49677 -0.358649 4.99052 -0.752399 2.63583 1.43666C-0.0626076 3.94916 -0.204405 8.45854 2.21044 11.182L10.5249 20.5476C11.062 21.1523 11.9343 21.1523 12.4714 20.5476L20.7858 11.182C23.205 8.45854 23.0632 3.94916 20.3647 1.43666Z" fill="black"/>
  </mask>
  
  <!-- 应用遮罩的背景矩形：这里可以修改fill值来调整外部背景色 -->
  <rect width="100%" height="100%" fill="#e0e0e0" mask="url(#heartMask)"/>
  
  <!-- 保留原有的心形描边 -->
  <path d="M20.3647 1.43666C18.01 -0.752399 14.5081 -0.358649 12.3468 2.07416L11.5003 3.02573L10.6538 2.07416C8.49677 -0.358649 4.99052 -0.752399 2.63583 1.43666C-0.0626076 3.94916 -0.204405 8.45854 2.21044 11.182L10.5249 20.5476C11.062 21.1523 11.9343 21.1523 12.4714 20.5476L20.7858 11.182C23.205 8.45854 23.0632 3.94916 20.3647 1.43666Z" stroke="#101010"/>
</svg>

关键部分说明： #

• <mask>标签：遮罩的逻辑是白色区域显示对应图形，黑色区域隐藏。先画全屏白色矩形，再在心形位置画黑色填充的路径，这样就形成了“心形区域挖空”的遮罩。
• 背景矩形：给矩形应用mask="url(#heartMask)"后，只有遮罩允许的区域（心形外部）会显示背景色，心形内部会透出下方的透明。
• 原心形路径：保留原来的描边并放在背景矩形上方，确保心形轮廓正常显示。

你可以修改背景矩形的fill值，换成需要的背景颜色或渐变。

内容的提问来源于stack exchange，提问作者Grégory LACROIX