svg 轮廓和填充

Question

我有一个带有黑色轮廓的心形 svg。我有兴趣将轮廓更改为红色路径，然后以编程方式单击它后，我想将心脏完全填满红色。类似于点赞按钮。我可以交换两个不同的图像，但我想了解如何通过将参数更改为单个 svg 来完成它。这是心脏 svg：

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
  <path d="M24 41.95 21.95 40.1Q13.8 32.65 8.9 27.1Q4 21.55 4 15.85Q4 11.35 7.025 8.325Q10.05 5.3 14.5 5.3Q17.05 5.3 19.55 6.525Q22.05 7.75 24 10.55Q26.2 7.75 28.55 6.525Q30.9 5.3 33.5 5.3Q37.95 5.3 40.975 8.325Q44 11.35 44 15.85Q44 21.55 39.1 27.1Q34.2 32.65 26.05 40.1ZM24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15ZM24 38Q31.6 31 36.3 25.85Q41 20.7 41 15.85Q41 12.55 38.875 10.425Q36.75 8.3 33.5 8.3Q31 8.3 28.8 9.85Q26.6 11.4 25.2 14.3H22.75Q21.4 11.4 19.175 9.85Q16.95 8.3 14.5 8.3Q11.2 8.3 9.1 10.425Q7 12.55 7 15.85Q7 20.7 11.7 25.85Q16.4 31 24 38Z" />
</svg>

如果我有 svg 元素的 fill 参数，特别是 fill="red" 它，负责创建红色轮廓，这是我想要的默认行为。我可以使用另一个参数让 SVG 的内部完全变成红色，而不仅仅是心形的轮廓吗？

Answer 1

与其尝试填充当前仅构成“笔划”（在本例中实际上是整个 SVG）的路径，不如使用心形更容易是 solid 然后用简单的 classList.toggle javascript 改变属性。这样，您就可以独立控制描边和填充了。

let svg = document.getElementById("heart");
svg.addEventListener('click', function() {
  svg.classList.toggle("filled");
})

body {
  background-color: lightgrey;
}

#heart {
  fill: transparent;
  stroke: red;
  stroke-width: 20px;
  transition: all 0.6s linear;
}

#heart.filled {
  fill: red;
  stroke: red;
  stroke-width: 20px;
  transition: all 0.6s linear;
}

<svg id="heart" xmlns="http://www.w3.org/2000/svg" height="200px" width="200px" viewBox="0 0 612 792">
<path d="M611.721,288.299c-2.258-42.176-20.114-81.782-50.287-111.524c-30.557-30.119-70.43-46.708-112.27-46.708
    c-62.267,0-107.396,49.233-131.641,75.684c-3.743,4.085-8.13,8.87-11.183,11.79c-2.444-2.529-5.756-6.3-8.803-9.768
    c-22.142-25.222-68.223-77.704-134.688-77.704c-41.84,0-81.711,16.588-112.268,46.708C20.408,206.517,2.547,246.121,0.29,288.299
    c-2.248,42.107,8.521,78.746,34.92,118.803c20.888,31.701,75.961,93.605,133.927,150.543c29.856,29.326,57.336,54.18,79.466,71.873
    c35.936,28.729,49.7,32.413,57.674,32.413c7.476,0,21.614-3.352,57.895-32.332c22.079-17.637,49.463-42.451,79.194-71.76
    c57.445-56.63,112.318-118.617,133.443-150.743C594.576,380.072,614.6,342.151,611.721,288.299z"/>
</svg>

svg 轮廓和填充

svg outline and fill

css

svg