时间戳

首页 > 解决方案 > 如何填充 SVG 的内部？

javascript - 如何填充 SVG 的内部？

问题描述


我正在尝试使用 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;
}
<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>

标签： javascripthtmljquerycsssvg

解决方案

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

$(`.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>

推荐阅读