如何填充 SVG 的内部？答案

【问题标题】：How can I fill the inside of a SVG?如何填充 SVG 的内部？
【发布时间】：2021-03-28 20:47:59
【问题描述】：

我正在尝试使用 html、css 和 javascript 在单击时填充心形 SVG，但它似乎不起作用。
这是svg代码：

<svg class="heartRecipe" id="heart${index}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M 15 7 C 7.832031 7 2 12.832031 2 20 C 2 34.761719 18.695313 42.046875 24.375 46.78125 L 25 47.3125 L 25.625 46.78125 C 31.304688 42.046875 48 34.761719 48 20 C 48 12.832031 42.167969 7 35 7 C 30.945313 7 27.382813 8.925781 25 11.84375 C 22.617188 8.925781 19.054688 7 15 7 Z M 15 9 C 18.835938 9 22.1875 10.96875 24.15625 13.9375 L 25 15.1875 L 25.84375 13.9375 C 27.8125 10.96875 31.164063 9 35 9 C 41.085938 9 46 13.914063 46 20 C 46 32.898438 31.59375 39.574219 25 44.78125 C 18.40625 39.574219 4 32.898438 4 20 C 4 13.914063 8.914063 9 15 9 Z"></path></svg>

我尝试了多种解决方案，例如在 CSS 中使用“填充”，它只填充 svg 周围的笔划，但也从第二个 M 中删除路径中的所有内容，这只会在尝试填充时给我一个错误它。

无论如何我可以填充这个 svg 的内部吗？

这是 javascript 代码和 css 代码。

$(`.heartRecipe`).on("click", (e) => {
  var heartId = e.target.id;
  $(`#${heartId}`).toggleClass("heartAnim")
})

.heartAnim {
  fill: #E74A70;
}

&lt;svg class="heartRecipe" id="heart${index}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"&gt;&lt;path d="M 15 7 C 7.832031 7 2 12.832031 2 20 C 2 34.761719 18.695313 42.046875 24.375 46.78125 L 25 47.3125 L 25.625 46.78125 C 31.304688 42.046875 48 34.761719 48 20 C 48 12.832031 42.167969 7 35 7 C 30.945313 7 27.382813 8.925781 25 11.84375 C 22.617188 8.925781 19.054688 7 15 7 Z M 15 9 C 18.835938 9 22.1875 10.96875 24.15625 13.9375 L 25 15.1875 L 25.84375 13.9375 C 27.8125 10.96875 31.164063 9 35 9 C 41.085938 9 46 13.914063 46 20 C 46 32.898438 31.59375 39.574219 25 44.78125 C 18.40625 39.574219 4 32.898438 4 20 C 4 13.914063 8.914063 9 15 9 Z"&gt;&lt;/path&gt;&lt;/svg&gt;

【问题讨论】：

感谢您的回复！无论如何我可以改变它吗？
codepen.io/Paulie-D/pen/KKaMxKe 重做路径，使其成为心脏轮廓的连续路径仅。我相信你可以在网上找到很多例子。
codepen.io/Paulie-D/pen/xxgOawK / commons.wikimedia.org/wiki/File:A_perfect_SVG_heart.svg

标签： javascript html jquery css svg

【解决方案1】：

您总是可以在点击时截断形状，使其内部不是外部和内部心形之间的边界，例如

$(`.heartRecipe`).on("click", (e) => {
  e.target.setAttribute("d", e.target.getAttribute("d").split("Z")[0]);
  $(e.target).toggleClass("heartAnim")
})

.heartAnim {
  fill: #E74A70;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg class="heartRecipe" id="heart${index}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M 15 7 C 7.832031 7 2 12.832031 2 20 C 2 34.761719 18.695313 42.046875 24.375 46.78125 L 25 47.3125 L 25.625 46.78125 C 31.304688 42.046875 48 34.761719 48 20 C 48 12.832031 42.167969 7 35 7 C 30.945313 7 27.382813 8.925781 25 11.84375 C 22.617188 8.925781 19.054688 7 15 7 Z M 15 9 C 18.835938 9 22.1875 10.96875 24.15625 13.9375 L 25 15.1875 L 25.84375 13.9375 C 27.8125 10.96875 31.164063 9 35 9 C 41.085938 9 46 13.914063 46 20 C 46 32.898438 31.59375 39.574219 25 44.78125 C 18.40625 39.574219 4 32.898438 4 20 C 4 13.914063 8.914063 9 15 9 Z"></path></svg>

【讨论】：