如何修改心形SVG内部背景色，解决背景溢出、fill改边框问题

问题原因 #

你遇到的两个异常表现的根源分别是：

• background 属性作用于SVG元素的矩形盒模型，和内部的矢量路径无关，加overflow: hidden也无法按照心形路径剪裁内容
• 当前心形是复合路径结构，默认填充规则下fill属性只会填充边框区域，内部会被自动挖空，所以你修改fill只会改边框颜色

可行方案 #

这里提供两种实现难度最低的方案，你可以根据兼容性需求选择：

方案1：CSS直接剪裁SVG背景（无需修改HTML，主流浏览器兼容）

直接给SVG元素设置和心形完全匹配的剪裁路径，background就只会显示在心形范围内：

.heart {
  width: 50%;
  margin-left: 25%;
  cursor: pointer;
  /* 新增心形剪裁规则 */
  clip-path: path('M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z');
}

.heart:active {
  background-color: red;
}

方案2：内嵌剪裁路径（兼容所有支持SVG的浏览器）

如果需要兼容更低版本浏览器，可以把剪裁路径写到SVG内部：
首先修改HTML里的SVG结构：

<svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 471.701 471.701">
  <!-- 新增剪裁路径定义 -->
  <defs>
    <clipPath id="heartClip">
      <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z"/>
    </clipPath>
  </defs>
  <!-- 给原有g标签加剪裁规则 -->
  <g clip-path="url(#heartClip)">
    <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"/>
  </g>
</svg>

CSS保持你原有逻辑即可：

.heart:active {
  background-color: red;
}

内容的提问来源于stack exchange，提问作者MIDAROU